JSON to HTML table - undefined

Question

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

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

Have you tried using their "JSON from AJAX" example? http://www.dynatable.com/?sorts%5Bus-%24%5D=-1#json-from-ajax — haliphax, Feb 24 '16 at 19:09
Thank you haliphax. I did. The problem I have is I can't post data to the ajaxurl using the syntax defined there. Hence, I tried implementing the case where JSON data was already available — usert4jju7, Feb 24 '16 at 19:22
You can't post data to the place you're trying to retrieve it from? I'm confused. — haliphax, Feb 24 '16 at 19:42
I meant, in the example you suggested, can you pleas tell me how to pass `POST` parameters to the `ajaxUrl`. I tried `data:list of various parameters` but doesn't work — usert4jju7, Feb 24 '16 at 20:03

score 1 · Accepted Answer · answered Feb 24 '16 at 21:21

1

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

answered Feb 24 '16 at 21:21

CrnaStena

3,017
5
30
48

Thank you heaps. Appreciate this. I would've definitely not thought about this one for sure. – usert4jju7 Feb 24 '16 at 22:22
Great. It is not issue with JSON, as uppercase should pass their [convention or lack of](http://stackoverflow.com/questions/5543490/json-naming-convention). – CrnaStena Feb 24 '16 at 23:02

JSON to HTML table - undefined

1 Answers1