JSON到HTML表 - 未定义

时间:2016-02-24 18:34:57

标签: javascript jquery html dynatable

我正在尝试使用JSON数据填充HTML表。我正在使用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响应很难从服务器返回,该表正在使用undefined

获取fileld

enter image description here

这是表格的HTML代码

<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

1 个答案:

答案 0 :(得分: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