Shopify Question posted in
The Shopify help center can be found here.

Datatable doesn't load JSON data, shows message "No data available in table" – Shopify

I’m using Datatables.net to display data on my Shopify site. As an example, I just set the JSON data to have 1 key value pair of “itemcode” and then the actual product’s item code. Here is an example of my data:

JSON Data

{
  "jsonData": [
    {
      "itemcode": "0735340080 - Bearings"
    },
    {
      "itemcode": "BL208-Z - Bearings"
    },
    {
      "itemcode": "9109K - Bearings"
    },
    {
      "itemcode": "735330016 - Bearings"
    },
    {
      "itemcode": "699-ZZ - Bearings"
    },
    {
      "itemcode": "698-ZZ - Bearings"
    },
    {
      "itemcode": "697-ZZ - Bearings"
    }
  ]
}

I’m using this code to load the data in. To clarify, the JSON is loaded from a hidden div element on the page:

Javascript Code

  $(document).ready(function () {
    var jsonDataDiv = document.getElementById("json-data").innerText;
    var jsonData = JSON.parse(jsonDataDiv);

    var table = $('#tableAppend').DataTable({
      orderCellsTop: true,
      pageLength: 25,
      data: jsonData,
      "columns": [{jsonData: "itemcode"}],
      columnDefs: [
        {"className": "dt-center", "targets": "_all"}
      ],
    });    
});

No errors are reported in the debug window, but my table states that no data was available. My HTML code is here:

HTML Code

<table class="display" id="tableAppend" style="margin-left: 20px;margin-right: 20px;">
 <thead>
  <tr>
    <th class="dt-center">Item Code</th>
  </tr>
  </thead>
</table>

I’ve been following Q&A’s online, but they don’t seem to relate to my problem.

Tags:

2

Answers


  1. 0

    The issue is in the initialization of the table

    Check out https://codepen.io/mvinayakam/pen/abzpJar

    $(document).ready(function () {
    var jsonDataDiv = document.getElementById(“json-data”).innerText;
    var jsonData = JSON.parse(jsonDataDiv);

    var table = $('#tableAppend').DataTable({
  orderCellsTop: true,
  pageLength: 25,
  data: jsonData,
  "columns": [{data: "itemcode"}],
  columnDefs: [
    {"className": "dt-center", "targets": "_all"}
  ],
});

    })

    As an aside, I am assuming the json is in the div only for trial purposes.

    Login or Signup to reply.
  2. 0

    You have to only change the data table column assign parameter name jsonData –> data

    "columns": [{data: "itemcode"}],
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search