«Недопустимая строка JSON» в примере API визуализации Google

Question

Я примерно следую этому примеру . Но, должно быть, делаешь что-то глупое ...

Серверная часть Django view code:

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

Это значения переменных, скопированные из отладчика pydev: (Я использую строки для каждого типа поля описания только для тестирования)

Описание:

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

данные:

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

JSON (генерируется API Google):

{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'}]}]}

JavaScript-код на стороне клиента, который получает 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});

Это приводит к следующей ошибке при создании объекта DataTable (вторая строка):

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

Я понял, что весь ключ был в том, чтобы убедиться, что формат схемы соответствует формату данных, но, похоже, это так. Это должно быть что-то простое.

Answer 1

Убедитесь, что вы указали 'unsafe-eval' для источников скриптов в Content-Security-Policy.

Политика, которую я использую для Карт Google и Карт Google:

<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;
  "
/>

Answer 2

К сожалению, я не могу комментировать, так что это не совсем полный ответ, но не могли бы вы попробовать оценить JSON, прежде чем пытаться использовать его для диаграммы?

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});

Я думаю, что это могло решить эту проблему для меня в прошлом; это может быть не самый безопасный способ сделать это, но вы можете по крайней мере попробовать его для тестирования.

В качестве альтернативы, возможно, поиграйте с simplejson, чтобы выгрузить строку json из питона, а не просто вернуть строку gviz?

Answer 3

Для синтаксических анализаторов JSON необходимо, чтобы имена полей разделялись двойными кавычками, как указано в спецификации JSON RFC 4627 :

Объект - неупорядоченная коллекция из нуля или более пар имя / значение, где имя является строкой [...] Строка начинается и заканчивается кавычками.

Итак, JSON должен быть отформатирован так:

{
    "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" 
                } 
            ] 
        } 
    ]
}

Answer 4

Возникла такая же проблема, даже при удалении параметров в пустой словарь (что привело к ошибке "Неверная строка JSON: {}" ...).Оказывается, проблема заключается в CSP script-src, задокументированном здесь: https://github.com/keen/keen-js/issues/394

«Решение» - добавить unsSP-eval в CSP.