Data is not populated in data table with array objects, getting blank screen

Question

Data is not populated in data table with array objects, getting blank screen. Tried with below code, any issue pls suggest

$('#example3').DataTable( {
        data:storedJsonData,
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "position" },
            { "data": "salary" },
            { "data": "start_date" },
            { "data": "office" },
            { "data": "extn" }
        ]
    } );

Fiddle

user_965146 · Answer

Data is not populated because columns header is case sensitive and must equal to given data.

I fix your data and columns header. Now it's work and show your data on DataTable.

var storedJsonData = [{
    "id": "1",
    "name": "abc",
    "position": "Accountant",
    "office": "Tokyo",
    "Age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750",
    "extn": "2"
  },
  {
    "id": "2",
    "name": "def",
    "position": "Accountant",
    "office": "Tokyo",
    "Age": "63",
    "start_date": "2011/07/25",
    "salary": "$170,750",
    "extn": "2"
  }
];

$('#example3').DataTable({
  data: storedJsonData,
  "columns": [{
      "data": "id"
    },
    {
      "data": "name"
    },
    {
      "data": "position"
    },
    {
      "data": "salary"
    },
    {
      "data": "start_date"
    },
    {
      "data": "office"
    },
    {
      "data": "extn"
    }
  ]
});

Data is not populated in data table with array objects, getting blank screen

1 Answers