title: Put JSON data into html form input hidden?
body: <p>I'm building a rich web application that uses a lot of data. When I'm building it I found that I was repeating myself over and over.</p>
  
  <p>This is the problem. I need to put hidden application logic into HTML elements to represent the data being viewed by the client.</p>
  
  <p>This is a solution I found some time ago:</p>
  
  <pre><code>&lt;a href="bla" data-itemId="1" .... more data.
  </code></pre>
  
  <p>There are two problems with this method.</p>
  
  <ol>
  <li>I can't represent arrays.</li>
  <li>It's just ugly.</li>
  </ol>
  
  <p>I searched for a solution but did not find anything. I also went to facebook, opened firebug,
  and found this: </p>
  
  <pre><code>{"actor":"19034719952","target_fbid":"454811929952","target_profile_id":"19034719952","type_id":"7","source":"1","assoc_obj_id":"","source_app_id":"","extra_story_params":[],"content_timestamp":"1324385453","check_hash":"9eabc3553e8a2fb6"}
  </code></pre>
  
  <p>This json was inside an <code>input[type=hidden]</code> element.</p>
  
  <p>I tried to do the same thing with <code>json_encode();</code></p>
  
  <pre><code>&lt;input type="hidden" name="track" value="{"_id":{"$id":"4eee908f615c2102e9010000"},"link":"george-wassouf-flag-of-my-heart-longing","file":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","lyrics":null,"freezed":false,"hits":0,"images":{"large":"\/assets\/static\/default.track.large.jpg","thumb":"\/assets\/static\/default.track.thumb.jpg","icon":"\/assets\/static\/default.track.icon.jpg"},"duration":"300","created":{"sec":1324257423,"usec":78000},"albums":[{"_id":{"$id":"4eee8d63615c21f6e7000000"},"names":{"ar":"\u0643\u0644\u0627\u0645\u0643 \u064a\u0627 \u062d\u0628\u064a\u0628\u064a","en":"Kalamak ya Habibi"},"link":"george-wassouf-kalamak-ya-habibi","images":{"original":"\/m\/pics\/albums\/o.4eee8d612c3183.11879972.jpg","poster":"\/m\/pics\/albums\/p.4eee8d63967072.02645896.jpg","large":"\/m\/pics\/albums\/l.4eee8d63a89111.20372767.jpg","small":"\/m\/pics\/albums\/s.4eee8d63b18927.47242533.jpg","thumb":"\/m\/pics\/albums\/t.4eee8d63b7f1f4.11879932.jpg","icon":"\/m\/pics\/albums\/i.4eee8d63bf1304.59902753.jpg"}},{"_id":{"$id":"4eee8d63615c21f6e7000000"},"name":"Kalamak ya Habibi","link":"george-wassouf-kalamak-ya-habibi"}],"name":"Flag of my heart longing","title":"Flag of my heart longing","mp3":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","poster":"\/m\/pics\/artists\/p.4eee85cd7ed579.65275366.jpg","artists":[{"_id":{"$id":"4eee85cd615c21ece6000000"},"name":"George Wassouf","link":"george-wassouf"}]}" /&gt;
  </code></pre>
  
  <p>But when I try getting the value I get this <code>{</code>.</p>
  
  <p>I have tried all constants like <code>JSON_HEX_TAG</code> and did not find any questions of this type.</p>
  
  <p>How can I put JSON into HTML correctly and then get it with jquery/javascript?</p>