Get JSON data stored in a hidden input element?

Question

I'm building a website that store json data to hidden input element with php

<input type='hidden' class='json_data' name='json_data' value='".json_encode($data[0])."'>

with that code, I have this result:

<input class="json_data" type="hidden" value="[{"ALBUM_ID":"1234","PHOTOS_ID":"1234578"}]" name="json_data">

but when I try to get the value with jquery.val and trying to show ALBUM_ID, i get this {

anything wrong with my way of putting json into html correctly?

and then get it with jquery / javascript ?

thanks

Why are you putting this in an hidden input and not just adding a script tag to the page with the value? — epascarello
– epascarello, Commented Aug 29, 2013 at 13:23

Muhammad Umer · Accepted Answer · 2013-08-29 15:23:53Z

3

First go ahead at this open console and see the result. Ctl+Shift+j.

http://jsfiddle.net/techsin/Q2MHA/

You need to do two things fix. ' and "'

Second just this code

JSON.parse($('.json_data').val())[0]

you need [0] because for some reason your json object is wrapped in []..you would know why.

Your html should look like this

<input ... value='[{"ALBUM_ID":"1234","PHOTOS_ID":"1234578"}]'...>

edited Aug 29, 2013 at 15:23

answered Aug 29, 2013 at 13:29

Muhammad Umer

18.3k26 gold badges111 silver badges179 bronze badges

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

Comments

Marcin Orlowski · Accepted Answer · 2013-08-29 13:07:34Z

1

You need to correctly handle entities in your input's value. If you populate it with PHP, use htmlspechalchars() and use result from this function

answered Aug 29, 2013 at 13:07

Marcin Orlowski

75.7k11 gold badges128 silver badges152 bronze badges

1 Comment

yosafatade Over a year ago

i did do that. htmlspecialchars(json_encode($data)) but still get the {

DevZer0 · Accepted Answer · 2013-08-29 13:08:02Z

1

inspect the following line carefully.

<input class="json_data" type="hidden" value="[{"ALBUM_ID":"1234","PHOTOS_ID":"1234578"}]" name="json_data">

As you see you have used " for your string enclosement. The json string also includes " which breaks your string enclosement. Use ' to enclose the string.

<input class="json_data" type="hidden" value='[{"ALBUM_ID":"1234","PHOTOS_ID":"1234578"}]' name="json_data">

answered Aug 29, 2013 at 13:08

DevZer0

13.5k7 gold badges29 silver badges54 bronze badges

2 Comments

epascarello Over a year ago

And when the value has a ' in it? Breaks once again!

thumber nirmal Over a year ago

@epascarello what if json string include ' and " both.What to do in this case ?

virtualmarc · Accepted Answer · 2013-08-29 13:07:35Z

0

Try to escape the " with addslashes or htmlspecialchars

or encode the string with base64 and decode it with JS before parsing the string as JSON

answered Aug 29, 2013 at 13:07

virtualmarc

5431 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

Get JSON data stored in a hidden input element?

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related