javascriptjqueryhtmldynatable

JSON to HTML table - undefined

I'm trying to fill a HTML table with JSON data. I'm using dynatable plugin.(No specific reason to use this. Just that I bumped on to this & found it's UI to be appealing).

JSON data sample returned by server

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

Code below - 

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

The problem I have is, tough the JSON response is coming back from the server fine, the table is getting fileld with undefined

enter image description here

Here's the HTML code for the 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>

I'm following the article here

Solution

  • Issue is with name of the properties, they need to start with lower-case.

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

    See this jsFiddle