Generating Google Chart JSON array

Question

I have a C# method which generates a JSON string that Google charts requires. The output of such would look a little like this:

[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]

I'm trying to retrieve this data from within my Javascript using getJSON and a method which returns a JsonResult. However, the Javascript will (correctly) not parse it as an array because I'm using a string.

How can I overcome this problem? I imagine I should be generating my C# JsonResult from an array, seeing as this is what the data is. However, Google's format doesn't exactly lend itself well to this...

Thanks in advance.

• user1106925: That isn't a valid JSON string. Double quotes are required around keys and string values.
• user1106925: ...if the getJSON you mention is jQuery's it will parse the string for you automatically, but it needs to be valid.
• Jonathan: That's kind of the problem; Google Charts seems to insist on this specific format. Perhaps I will have to continue generating it as a string, but how can I then convert this to an array in my Javascript?
• Timothy Jones: Doesn't the Google Chart API just take a Javascript object? I'm sure that the invalid JSON is the problem here.
• L.B: @Simon, See the first items of your array of arrays. Sometimes an object like {"v": "Mike","f": "Mike"} sometimes a string.

Answer 1

If the text can't be made valid JSON, you may need to use eval...

var arr = eval(response_string);

Or have it eval'd using the Function constructor...

var arr = Function('return ' + response_string)();

...but in both cases, make sure you trust the data being sent.

---

Both of these techniques will evaluate the string as JavaScript code, so whatever is sent will run as long as the JavaScript syntax is valid.

Answer 2

From the documentation:

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript's object literal notation

As a commenter points out, your JSON isn't valid. This:

 [ [{ v: 'Mike', f: 'Mike' }, .... 

should be:

 [ [{ "v": "Mike", "f": "Mike" }, .... 

Also make sure that your JSON isn't accidentally surrounded in " characters. You can test a JSON string for validity here.

Once you've done that, the data passed to your callback should be the array you're looking for:

$.getJSON('url.json', function(data) {
 // data is the array you're looking for
});

---

If your problem is that you need to convert the resulting object into a string for the Charts API, take a look at JSON.stringify(). If you need to support browsers that don't implement it, you can find an implementation linked here.

Answer 3

getJSON will parse the "string" result returned by your method. If, however you're returning a JsonResult with a string as your're argument, it's simply encoding that string which is then parsed as a string on the client.

If you want to return an array of objects, then set an array of objects as the Data parameter and it will be serialized to JSON automatically.

Answer 4

Say that "s" is the returned string, x will contain the JavaScript object:

var s = "[ [{ v: 'Mike', f: 'Mike' }, '', 'The President'], [{ v: 'Jim', f: 'Jim Vice President' }, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]"
var x = eval("y=" + s)