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.