Return json value to storage in hidden input field

Question

I was wondering if it is possible to save the returned json in a hidden input field. For example, this returns my json:

[{"id":"15aea3fa","firstname":"John","lastname":"Doe"}] 

I would just like to save the identifier in a hidden field so that I can later refer to it in order to do something with it.

Example: I have something like this:

 <input id="HiddenForId" type="hidden" value="" /> 

and would like jquery to return a value later to me like this:

 var scheduletimeid = $('#HiddenForId').val(); 

Answer 1

You can save it in a hidden field, or save it in a javascript object (my preference), since the probable access will be through javascript.

NOTE. Since you have an array, then myvariable[0] will be available for it for the first element (as you have).

Example of showing EDIT:

 clip... success: function(msg) { LoadProviders(msg); }, ... var myvariable =""; function LoadProviders(jdata) { myvariable = jdata; }; alert(myvariable[0].id);// shows "15aea3fa" in the alert 

EDIT: Created this page: http://jsfiddle.net/GNyQn/ to demonstrate this. This example assumes that you have correctly returned your named string values ​​in the array and just have to save it in a single OP question. In this example, I also returned the values ​​of the first array (in the OP example) to the div as text.

I am not sure why this was considered “complex”, since I do not see an easier way to process these strings in this array.

Answer 2

Although I saw the suggested methods used and working, I think setting the value of the hidden field using JSON.stringify only interrupts the HTML ...

Here I will explain what I mean:

 <input type="hidden" value="{"name":"John"}"> 

As you can see the first double quote after the open chain can be interpreted by some browsers as:

 <input type="hidden" value="{" rubbish > 

So, for a better approach to this, I would suggest using the encodeURIComponent function. Together with JSON.stringify, we have something like the following:

 > encodeURIComponent(JSON.stringify({"name":"John"})) > "%7B%22name%22%3A%22John%22%7D" 

Now this value can be safely stored in a hidden form of input, for example:

 <input type="hidden" value="%7B%22name%22%3A%22John%22%7D"> 

or (even better) using the data attribute of an HTML element controlled by a script that will consume data, for example:

 <div id="something" data-json="%7B%22name%22%3A%22John%22%7D"></div> 

Now, to read the data back, we can do something like:

 > var data = JSON.parse(decodeURIComponent(div.getAttribute("data-json"))) > console.log(data) > Object {name: "John"} 

Answer 3

You can use input.value = JSON.stringify(obj) to convert the object to a string.
And when you need it, you can use obj = JSON.parse(input.value)

The JSON object is available in modern browsers or you can use the json2.js library from json.org

Answer 4

If you use JSON Serializer , you can just save your object in a string format as such

 myHiddenText.value = JSON.stringify( myObject ); 

Then you can return the value with

 myObject = JSON.parse( myHiddenText.value ); 

However, if you are not going to pass this value on the page, it may be easier for you, and you will save a lot of serialization if you simply drop it as a global javascript variable.

Answer 5

It looks like the return value is in an array? This is somewhat strange ... and also keep in mind that some browsers will allow this to be parsed from a cross-domain request (which is not true if you have a top-level JSON object).

In any case, if it is an array wrapper, you need something like this:

 $('#my-hidden-field').val(theObject[0].id); 

You can then get it through a simple call to .val () in the same field. It honestly looks weird. The hidden field will not be stored in page requests, so why don't you just leave it in your own real value slave? For example.

 $MyNamespace = $MyNamespace || {}; $MyNamespace.myKey = theObject; 

This will make it available to you from anywhere, without any hacker control of the input field. It is also much more efficient than modifying the DOM to easily store values.

Answer 6

just set the hidden field using javascript:

 document.getElementById('elementId').value = 'whatever'; 

or am I missing something?