NOTE: DataGridXL requires a commercial license.

Create an account to download a trial version of DataGridXL to follow the steps in this tutorial.

DataGridXL — Docs

Working With Data

Load a JSON-file using AJAX

json

[{
  "breed": "Kooikerhondje",
  "votes": 210,
  "origin": "The Netherlands"
}, {
  "breed": "Beagle",
  "votes": 235,
  "origin": "Great Britain"
}, {
  "breed": "Dalmatian",
  "votes": 90,
  "origin": "Croatia"
}]

Loading JSON

To have DataGridXL display your remote JSON data, use JavaScript fetch method.

javascript

async function loadDataAndDisplayGrid() {
  // load data  
  const response = await fetch('/myapi/mydata.json');
  const data = await response.json();
  // display grid
  const grid = new DataGridXL("grid", {
    data: data
  });
}
loadDataAndDisplayGrid();

The above example assumes that mydata.json outputs valid JSON, where the data that's meant for the data grid is the root of the JSON-output.

Load JSON using jQuery

If you're including jQuery, you can use $.getJSON instead of fetch:

javascript

$.getJSON("/myapi/mydata.json", function(data){
  new DataGridXL("grid", {
    data: data
  });
});

Validating JSON

JSON looks very similar to JavaScript, but has stricter rules. If you're not sure if your server-side script outputs valid JSON, paste your file's output to a tool like jsonlint.com to check.

← Previous