how to convert JSONString to Javascript Object

Question

I need some help on the JavaScript. I do a ajax call on a button click, which returns the below String and this is generated using GSON(basically it is a JSON object).

{ 
  "chart":{
      "renderTo":"container",
      "type":"bar"
   },
   "title":{
      "text":"Engagement Per Vendor Per GBP"
   },
   "subtitle":{
      "text":"ASPT"
   },
   "xAxis":{
      "categories":[
         "A",
         "B",
         "C",
         "D"
      ],
      "title":{
         "text":"Engagement Per Vendor Per GBP"
      }
   },
   "yAxis":{
      "min":0,
      "title":{
         "text":"Count",
         "align":"high"
      }
   },
   "plotOptions":{
      "bar":{
         "dataLabels":{
            "enabled":true
         }
      }
   },
   "legend":{
      "layout":"vertical",
      "align":"right",
      "verticalAlign":"bottom",
      "x":-100,
      "y":100,
      "floating":true,
      "borderWidth":1,
      "backgroundColor":"#FFFFFF",
      "shadow":true
   },
   "credits":{
      "enabled":true
   },
   "series":[
      {
         "name":"ABC",
         "data":[
            10,
            20,
            20,
            30
         ]
      },
      {
         "name":"DEF",
         "data":[
            10,
            20,
            30,
            40
         ]
      },
      {
         "name":"GHIJ",
         "data":[
            20,
            30,
            40,
            10
         ]
      },
      {
         "name":"KLMN",
         "data":[
            10,
            40,
            20,
            30
         ]
      }
   ]
}

When I get this data in my javascript. I’m trying to convert the object to JSON using the below statement

var jsonObj = eval(xmlHttp.responseText);

xmlHttp.responseText has the below string

{"chart":{"renderTo":"container","type":"bar"},"title":{"text":"Engagement Per Vendor Per GBP"},"subtitle":{"text":"ASPT"},"xAxis":{"categories":["A","B","C","D"],"title":{"text":"Engagement Per Vendor Per GBP"}},"yAxis":{"min":0,"title":{"text":"Count","align":"high"}},"plotOptions":{"bar":{"dataLabels":{"enabled":true}}},"legend":{"layout":"vertical","align":"right","verticalAlign":"bottom","x":-100,"y":100,"floating":true,"borderWidth":1,"backgroundColor":"#FFFFFF","shadow":true},"credits":{"enabled":true},"series":[{"name":"ABC","data":[10,20,20,30]},{"name":"DEF","data":[10,20,30,40]},{"name":"GHIJ","data":[20,30,40,10]},{"name":"KLMN","data":[10,40,20,30]}]}

When I try to run the jsp, it stops at var jsonObj = eval(xmlHttp.responseText);

I have done this before many time, but this time the data is different. The JSON string was created by by a JSON method from GSON api.

Unless I get this in to a JSON object, I’ll not be able to do anything with it. Any help on this is appreaciated.

Regards, Senny

Answer 1

jQuery can do it:

http://api.jquery.com/jQuery.parseJSON/

If you don't want to use eval, here is a standalone parser: https://github.com/douglascrockford/JSON-js

UPDATE Just use the in-built JSON object

Answer 2

This is a valid JSON format, so use JSON.parse(xmlHttp.responseText) when possible (IE8+, Firefox, Chrome, Opera, Safari...), and use eval('(' + xmlHttp.responseText + ')') for IE6-7, note you should add an extra pair of bracket (( and )) when using eval:

if (JSON) return JSON.parse(xmlHttp.responseText);
else return eval('(' + xmlHttp.responseText + ')');