“Invalid JSON string” in Google visualization API example

问题

I am roughly following this example. But must be doing something silly...

The server side Django view code:

data_table = gviz_api.DataTable(description)
data_table.LoadData(data)
json = data_table.ToJSon()
return json

These are the values of the variables copy-pasted from the pydev debugger: (Im using strings for each description field type just for testing)

description:

[("sensor","string", "Sensor name"), 
 ("timestamp","string", "Time"),
 ("value","string", "Sensor value")]

data:

[['testsensor', '2011-05-09 16:06:43.936000', '22.0'],
['testsensor', '2011-05-09 16:56:23.367000', '23.0']]

json (generated by the google api):

{cols:[{id:'sensor',label:'Sensor name',type:'string'},{id:'timestamp',label:'Time',type:'string'},{id:'value',label:'Sensor value',type:'string'}],rows:[{c:[{v:'testsensor'},{v:'2011-05-09 16:06:43.936000'},{v:'22.0'}]},{c:[{v:'testsensor'},{v:'2011-05-09 16:56:23.367000'},{v:'23.0'}]}]}

The client side javascript code that receives the json:

var json_table = new google.visualization.Table(document.getElementById('dataview'));
var json_data = new google.visualization.DataTable(data, 0.6);
json_table.draw(json_data, {showRowNumber: true});

This causes the following error on constructing the DataTable object (second line):

Uncaught Error: Invalid JSON string: {cols:[{id:'sensor',label:'Sensor name',type:'string'},{id:'timestamp',label:'Time',type:'string'},{id:'value',label:'Sensor value',type:'string'}],rows:[{c:[{v:'testsensor'},{v:'2011-05-09 16:06:43.936000'},{v:'22.0'}]},{c:[{v:'testsensor'},{v:'2011-05-09 16:56:23.367000'},{v:'23.0'}]}]}
in default,table.I.js:152

I understood that the whole clue was making sure that the schema format matches the data format but this seems to be the case. It must be something simple.

回答1:

Unfortunately I can't comment so this isn't exactly a full answer, but could you try eval'ing the JSON before trying to use it for the chart?

var json_table = new google.visualization.Table(document.getElementById('dataview'));
var evalledData = eval("("+data+")");
var json_data = new google.visualization.DataTable(evalledData, 0.6);
json_table.draw(json_data, {showRowNumber: true});

I think that may have solved this problem for me in the past; it may not be the safest way to go about it, but you could at least try it for testing.

Alternatively, perhaps play with simplejson to dump your json string from the python instead of just returning the gviz string?

回答2:

Make sure you put 'unsafe-eval' for script sources in Content-Security-Policy.

A policy I use for Google Maps and Google Charts:

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    script-src 'self' 'unsafe-inline' 'unsafe-eval' maps.googleapis.com www.google.com www.google-analytics.com;
    img-src 'self' csi.gstatic.com www.google-analytics.com maps.gstatic.com maps.googleapis.com;
    style-src 'self' 'unsafe-inline' www.google.com fonts.googleapis.com ajax.googleapis.com;
    font-src 'self' fonts.gstatic.com;
  "
/>

回答3:

JSON parsers should require field names to be delimited by double quotes, as outlined in the specification JSON RFC 4627:

An object is an unordered collection of zero or more name/value pairs, where a name is a string [...] A string begins and ends with quotation marks.

So, the JSON should be formatted like this:

{
    "cols": [
        {
            "id": "sensor",
            "label": "Sensor name",
            "type": "string" 
        },
        {
            "id": "timestamp",
            "label": "Time",
            "type": "string" 
        },
        {
            "id": "value",
            "label": "Sensor value",
            "type": "string" 
        } 
    ],
    "rows": [
        {
            "c": [
                {
                    "v": "testsensor" 
                },
                {
                    "v": "2011-05-09 16: 06: 43.936000" 
                },
                {
                    "v": "22.0" 
                } 
            ] 
        },
        {
            "c": [
                {
                    "v": "testsensor" 
                },
                {
                    "v": "2011-05-09 16: 56: 23.367000" 
                },
                {
                    "v": "23.0" 
                } 
            ] 
        } 
    ]
}

回答4:

Had the same issue, even when stripping the options to an empty dictionary (resulting in the error "Invalid JSON string: {}" ...). Turns out the issue is with the script-src CSP, documented here: https://github.com/keen/keen-js/issues/394

"Solution" is to add unsafe-eval to the CSP.

来源：https://stackoverflow.com/questions/6007381/invalid-json-string-in-google-visualization-api-example

标签

javascript

django

json

google-visualization