JSON 到 HTML table - 未定义

Question

我正在尝试用 JSON 数据填充 HTML table。我正在使用 dynatable 插件。（没有特定的理由使用它。只是我偶然发现它并发现它 UI 很有吸引力）。

JSON服务器返回的数据样本

[{"DATE":"2015-12-15","TYPE":"AAA","NAME":"asdasd"},{"DATE":"2015-12-15","TYPE":"BBB","NAME":"dsfsdfsdfsdf"},{"DATE":"2015-12-15","TYPE":"AAA","NAME":"reterter"},{"DATE":"2015-12-15","TYPE":"CCC","NAME":"ertertertert"}]

下面的代码 -

function jsDataPlot(chartProps) {
    // Get the array from the element:
    var graphPropsStore = chartProps;

    // Loop through the array with the jQuery each function:
    $.each(graphPropsStore, function (k, graphPropsStoreProperty) {

        // The makeCall function returns a ajaxObject so the object gets put in var promise
        var dbResAjx = getResultFromSql(k);

        // Now fill the success function in this ajaxObject (could also use .error() or .done() )
        dbResAjx.success(function (response) {
            console.log(response);

         //  myRecords = JSON.parse(response.text());
            $('#tableIdToFill').dynatable({
                dataset: {
                    records:   $.parseJSON(response)
                }
            });
        });

        dbResAjx.error(function (response) {
            console.log(response);
        });
    });
}

我遇到的问题是，JSON 响应从服务器正常返回，table 正在使用 undefined

获取文件

这是 HTML table

的代码

<body id="htmlDataTable">
<table id="tableIdToFill" class="display" cellspacing="0" width="98%">
    <thead>
    <tr>
        <th>DATE</th>
        <th>TYPE</th>
        <th>NAME</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>DATE</th>
        <th>TYPE</th>
        <th>NAME</th>
    </tr>
    </tfoot>
</table>
</body>

我正在关注文章 here

Answer 1

问题在于属性的名称，它们需要以小写字母开头。

var jsonData = `[
    {
      "date": "2015-12-15",
      "type": "AAA",
      "name": "asdasd"
    },
    {
      "date": "2015-12-15",
      "type": "BBB",
      "name": "dsfsdfsdfsdf"
    },
    {
      "date": "2015-12-15",
      "type": "AAA",
      "name": "reterter"
    },
    {
      "date": "2015-12-15",
      "type": "CCC",
      "name": "ertertertert"
    }
  ]`;
//console.log(jsonData);
var response = JSON.parse(jsonData);
console.log(response);

$('#tableIdToFill').dynatable({
  dataset: {
    records: response
  }
});

看到这个jsFiddle

JSON 到 HTML table - 未定义

JSON to HTML table - undefined

html

javascript

jquery

dynatable