Retrieve JSON data from a hidden input

Question

I store JSON data in HTML hidden fields on the server side. Then I'd like to retrieve that data using Javascript and JQuery on the client side. The problem is that I get a JSON string instead of a JSON object.

This is my code on the server side:

<form id="data" style="display: none;">
    <input id="channels" type="hidden" tal:attributes="value python: view.context['ChannelManager'].toJSON(view.channels.values())" />
    <input id="mediaGroups" type="hidden" tal:attributes="value python: view.context['MediaGroupManager'].toJSON(view.mediaGroups.values())" />
</form>

This is my code on the client side:

copy.channelList = new ChannelTest();
copy.channelList.fromJSONObjectAll($("#data input[id=channels]").val())

So I get JSON string instead of JSON object from this, $("#data input[id=channels]").val().

How could I get JSON object without converting JSON string in JSON object?

Thanks in advance!

What do you mean by "get JSON object without converting the string"? — casablanca
– casablanca, Commented Nov 29, 2010 at 17:26
I posted what I think you want but yeah that part is confusing. You are asking how to convert a json string to an object, without converting a json string to an object... — Alex Wayne
– Alex Wayne, Commented Nov 29, 2010 at 17:29
When I fill the HTML inputs the data is JSON object, not a JSON String. However, when I get that data on the client side, it's JSON string instead of JSON Object. I'd like to avoid to convert that JSON string in JSON object. — bribon
– bribon, Commented Nov 29, 2010 at 17:33

Alex Wayne · Accepted Answer · 2010-11-29 17:37:45Z

6

JSON.parse(jsonString);

For older browsers that don't have native JSON support, you can simply include json2.js and this will become a usable function.

Or you can skip this step with some server side scripting. You can simply write the JSON into a script tag. It is parsed implicitly by the script tag instead, as raw javascript.

<script type="text/javascript">
  var myObj = <%= myJsonString %>;
  console.log('we got this value: '+ myObj.myValue);
</script>

edited Nov 29, 2010 at 17:37

answered Nov 29, 2010 at 17:28

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

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

3 Comments

bribon Over a year ago

I'd like to avoid JSON.parse(jsonString) because when I store it on the client side, the data is JSON object. What's the problem? Can I store JSON objects in HTML inputs? I can't use that kind of scripting with framework which I'm using

Alex Wayne Over a year ago

<input> tags can only have string values. So if you want to store your data as a string, you have to convert it from a string to a javascript object. Or you can skip putting in an HTML element at all, and write it directly to the script tag as I outlined above. But you will never get an <input> to store an object directly. Only a string. Remember that form elements encode themselves for form submission. So <input type="text" name="foo" value="bar"> would encode itself like ?foo=bar. If that was a Javascript object, how would it encode itself as a complex object?

Ruan Mendes Over a year ago

@bribon: Your data on the server is a json string, there's no way to transfer it to the client directly as a javascript object. If you follow Squeegy's suggestion (embedding the data as js variables, then the browser will do the parsing for you when the page is first read)

Collectives™ on Stack Overflow

Retrieve JSON data from a hidden input

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related