Home/ Questions/Q 6952863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:24:15+00:00

I’m building a rich web application that uses a lot of data. When I’m

  • 0

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.

This is the problem. I need to put hidden application logic into HTML elements to represent the data being viewed by the client.

This is a solution I found some time ago:

<a href="bla" data-itemId="1" .... more data.

There are two problems with this method.

  1. I can’t represent arrays.
  2. It’s just ugly.

I searched for a solution but did not find anything. I also went to facebook, opened firebug,
and found this: 

{"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"}

This json was inside an input[type=hidden] element.

I tried to do the same thing with json_encode();

<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"}]}" />

But when I try getting the value I get this {.

I have tried all constants like JSON_HEX_TAG and did not find any questions of this type.

How can I put JSON into HTML correctly and then get it with jquery/javascript?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your string is correct, but it cannot be defined in HTML because it contains double quotes.

    HTML requires you to escape double quotes when you are defining a String that is itself enclosed within double quotes. The appropriate way of doing this is using the HTML entity:

    value="&quot;"

    From PHP:

    Use htmlspecialchars or htmlentities (http://www.php.net/manual/en/function.htmlspecialchars.php). In any case, you normally should be using this over EVERY value you write to the client browser (not doing so may result in security risks).

    From Javascript:

    If you need to do this from Javascript, you can programatically set the value of the hidden element (provided your JSON string is already contained in a Javascript variable). This way you don’t have to worry about encoding the string literal:

    hiddenElement.value = yourString;

    In order to get an escape function you can use, maybe check this thread: Escaping HTML strings with jQuery .

    • 0