JSON string to JS object

Question

I am using a JS object to create graphs with Google visualization. I am trying to design the data source. At first, I created a JS object client-side.

var JSONObject = {
    cols: [{id: 'date', label: 'Date', type: 'date'},
{id: 'soldpencils', label: 'Sold Pencils', type: 'number'},
        {id: 'soldpens', label: 'Sold Pens', type: 'number'}],
    rows: [{c:[{v: new Date(2008,1,1),f:'2/1/2008'},{v: 30000}, {v: 40645}]},
        {c:[{v: new Date(2008,1,2),f:'2/2/2008'},{v: 14045}, {v: 20374}]},
     {c:[{v: new Date(2008,1,3),f:'2/3/2008'},{v: 55022}, {v: 50766}]}]  
};

var data = new google.visualization.DataTable(JSONObject, 0.5);

Now I need to fetch the data dynamically. So I send an AJAX request to a page that returns the JSON string:

 "cols: [{id: 'date', label: 'Date', type: 'date'},
{id: 'soldpencils', label: 'Sold Pencils', type: 'number'},
{id: 'soldpens', label: 'Sold Pens', type: 'number'}],
  rows: [{c:[{v: new Date(2008,1,1),f:'2/1/2008'},{v: 30000}, {v: 40645}]},
      {c:[{v: new Date(2008,1,2),f:'2/2/2008'},{v: 14045}, {v: 20374}]},
{c:[{v: new Date(2008,1,3),f:'2/3/2008'},{v: 55022}, {v: 50766}]}"

This I save into a variable:

var var1 = "cols: [{i ....... 66}]}"

and show as

alert(var1);

Now my task is to create a JS object from this string. This is not working. When I use a JS object, everything works fine and I am able to get my required graph. Now if I try putting the same value of string from the AJAX request which I confirmed from a alert message into a n object, the object is not getting created correctly. Please let me know your opinion and any correction or advices.

Answer 1

Some modern browsers have support for parsing JSON into a native object:

var var1 = '{"cols": [{"i" ....... 66}]}';
var result = JSON.parse(var1);

For the browsers that don't support it, you can download json2.js from json.org for safe parsing of a JSON object. The script will check for native JSON support and if it doesn't exist, provide the JSON global object instead. If the faster, native object is available it will just exit the script leaving it intact. You must, however, provide valid JSON or it will throw an error — you can check the validity of your JSON with http://jslint.com or http://jsonlint.com.

Answer 2

You can use eval(jsonString) if you trust the data in the string, otherwise you'll need to parse it properly - check json.org for some code samples.

Answer 3

the string in your question is not a valid json string. From json.org website:

JSON is built on two structures:

* A collection of name/value pairs. In various languages, this is 
  realized as an object, record, struct, dictionary, hash table, keyed list, or
  associative array.
* An ordered list of values. In most languages, this is realized as an
  array, vector, list, or sequence.

Basically a json string will always start with either { or [.

Then as @Andy E and @Cryo said you can parse the string with json2.js or some other libraries.

IMHO you should avoid eval because it will any javascript program, so you might incur in security issues.

Answer 4

You can use this library from JSON.org to translate your string into a JSON object.

var var1_obj = JSON.parse(var1);

Or you can use the jquery-json library as well.

var var1_obj = $.toJSON(var1);

Answer 5

The string you are returning is not valid JSON. The names in the objects needs to be quoted and the whole string needs to be put in { … } to form an object. JSON also cannot contain something like new Date(). JSON is just a small subset of JavaScript that has only strings, numbers, objects, arrays, true, false and null.

See the JSON grammar for more information.