26

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?

Improve this question

6 Answers 6

Reset to default
51

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 .

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thanks, i ended up using htmlspecialchars, i hope there is no problem with using this method...
4

Best way for me was to use html & quot;

for example i do this:

 <input type="hidden" id="v" value="[{&quot;id&quot;:&quot;1&quot;}]" >

instead of 

 <input type="hidden" id="v" value="[{"id":"1"}]" >
Improve this answer

Comments

2

in your input tag, the value attribute in which you are trying to put json array. Look at it. you are putting ". Second " is ending the attribute value. thus it is being interpreted as value = "{". you need to escape those ". Use single quotes ' instead. And check then

Improve this answer

2 Comments

Single quotes are not valid JSON string delimiters, I think.
If you use single quotes for your html vale attr is works ie value='json'
2

It seems my answer is late, but I want to contribute to those who come later. Before coming here you have the concept of HTML.Use single quotes ' , Should not do that, although it still works, it is against the HTML principle . The best way is: Use htmlspecialchars or htmlentities. @jjmont said above.

I have a small example:

<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_COMPAT ); ?>" >

||

<input id="jsondata" value="<?php echo htmlspecialchars( json_encode($data), ENT_NOQUOTES ); ?>" >
Improve this answer

1 Comment

Beautiful! what a nice way to reduce code and eliminate the arrays on input boxes
1

You can just use single quotes for your html value attribute:

value='json'

Improve this answer

1 Comment

in my case (I use node), I have js object that I convert to JSON with JSON.stringify, then put it in html hidden input with value='my_json_var', and take back after submit with JSON.parse(req.body.my_json_var)
-1

php set array in 

<input type="checkbox" name="deviceInfo" value="<?php print_r(json_encode(array_filter($array_data), JSON_FORCE_OBJECT));?>" />
?>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.