store return json value in input hidden field

Question

Hi all, I was wondering if it's possible to store the return json in a hidden input field. For example this is what my json return:

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

I would like to just store the id in a hidden field so I can reference it later to do something with it.

ex: I have something like this... ... and would like jquery to return the value later to me like so ... var scheduletimeid = $('#HiddenForId').val(); ...

Answer 1

just set the hidden field with javascript document.getElementById('elementId').value = 'whatever';

or do I miss something?

Answer 2

You can store it in a hidden field, OR store it in a javascript object (my preference) as the likely access will be via javascript.

NOTE: since you have an array, this would then be accessed as myvariable[0] for the first element (as you have it).

EDIT show example:

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 the above. This example makes the assumption that you have already properly returned your named string values in the array and simply need to store it per OP question. In the example, I also put the values of the first array returned (per OP example) into a div as text.

I am not sure why this has been viewed as "complex" as I see no simpler way to handle these strings in this array.

Answer 3

You could convert it to a string. (using Updated method suggested by other user), and base64 encode it before setting it on the form.

     var jsonObj = {"id":"15aea3fa","firstname":"John","lastname":"Doe"};

     var jsonStr = base64Encode( JSON.stringify(jsonObj) );

EDIT: Also, you'll need to find a base64 encode function online, such as: http://www.webtoolkit.info/javascript-base64.html

So, your final input will be something like :

     <input type=hidden name="jsonObject" value="eyJpZCI6IjE1YWVhM2ZhIiwiZmlyc3RuYW1lIjoiSm9obiIsImxhc3RuYW1lIjoiRG9lIn0=" />

EDIT (Again).

Regardless of how people are rating my post, you WILL have to base64 encode the string before setting it to the hidden form field. Especially if you are using a "GET" with your form.

My guess is that you are submitting the form, so storing it in a local var WILL NOT WORK.

Answer 4

If you use the JSON Serializer, you can simply store your object in string format as such

myHiddenText.value = JSON.stringify( myObject );

You can then get the value back with

myObject = JSON.parse( myHiddenText.value );

However, if you're not going to pass this value across page submits, it might be easier for you, and you'll save yourself a lot of serialization, if you just tuck it away as a global javascript variable.

Answer 5

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

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

Answer 6

It looks like the return value is in an array? That's somewhat strange... and also be aware that certain browsers will allow that to be parsed from a cross-domain request (which isn't true when you have a top-level JSON object).

Anyway, if that is an array wrapper, you'll want something like this:

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

You can later retrieve it through a simple .val() call on the same field. This honestly looks kind of strange though. The hidden field won't persist across page requests, so why don't you just keep it in your own (pseudo-namespaced) value bucket? E.g.,

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

This will make it available to you from anywhere, without any hacky input field management. It's also a lot more efficient than doing DOM modification for simple value storage.