Convert JSON text to JS object

Question

I have a JSON string which is of the format

[{"A":"SomeStringData","B":1},
{"A":"SomeStringData","B":2},
...
...
...]

1. Note that this passes fine through all json online parsers and is hence a valid JSON text.

2. I'm trying to pass the data to create a chart using d3 and nv.d3. The snippet I'm using is as follows:

   var jsonString; nv.addGraph(function(){ var chart=nv.models.discreteBarChart().x(Something).y(Something); d3.select('#location').datum(jsonString).call(chart); return chart; });

3. Note that Im passing the json text as it is to the datum() function. This does not work.

4. I try json.parse(jsonString), and it doesn't work either
5. I try eval, but it also doesn't help.

6. I edit the json string to add a root node like so:

   [{values:[{"A1":"SomeStringData","A2":1}, {"B1":"SomeStringData","B2":2}, ... ... ...]}]

7. The above returns an error through all online parsers.

8. But, I'm able to get my chart using eval("("+jsonString+")") now.(JSON.parse() still doesn't work)

Now, my knowledgeable colleagues say eval() is dangerous and should be burnt at the stake. So, I'm guessing I should go for JSON.parse() which does not work.

Does anyone have any idea what I'm doing wrong with JSON.parse()? I'm new to JSON and its driving me insane.

If it helps, Im passing the json string as a string through an MVC controller:

Im using the following function obtained from here

public static class JSONHelper
    {
        public static string ToJSON(this object obj)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize(obj);
        }

        public static string ToJSON(this object obj, int recursionDepth)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            serializer.RecursionLimit = recursionDepth;
            return serializer.Serialize(obj);
        }
    }

The returned string is just passed through to the controller as a string variable. Nothing fancy there.

Answer 1

The discrete bar char is expecting the same name for labels and values:

nv.addGraph(function() {  
  var chart = nv.models.discreteBarChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
  ...
  ;

So, either incorporate the expected names in your data, as such:

historicalBarChart =
  [{
    key: "SomeKey",
    values:[
       { 
        "label":"SomeStringData",
       "value":100
    }, 
    {
      "label":"SomeStringData",
      "value":200
    }
    ]}
];

Or keep your names, but then change the code, making sure the names in the data are kept uniform.

Answer 2

I've tried the following in Chrome console.

var jsonString = '[{"A1": "SomeStringData","A2": 5},{"B1": "SomeStringData","B2": 14}]';
var jsonObject = JSON.parse(jsonString);
JSON.stringify(jsonObject);

which then outputs as expected

"[{"A1":"SomeStringData","A2":5},{"B1":"SomeStringData","B2":14}]"

What browser are you using? I can only assume this is either a browser bug, or you're not preparing the JSON string with apostrophes at the begining and the end.