Load a JSON-file using AJAX

To have DataGridXL display your remote JSON data, use a vanilla Javascript AJAX method, or jQuery's $.getJSON if you're already including jQuery.

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

Load JSON using Vanilla Javascript

makeAjaxRequest("file.json", function(data){

  var parsedData = JSON.parse(data);
  console.log("is our data valid?", parsedData);

  new DataGridXL("grid", {
    data: parsedData
  });

});

// our vanilla Javascript AJAX function
function makeAjaxRequest(path, callback){

  var xhr = new XMLHttpRequest();
  xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
      callback(xhr.response);
    } else {
      console.log('The request failed!');
    }
  };

  xhr.open('GET', path);
  xhr.send();

}

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

Just console.log(data) if you're unsure what file.json returns. Don't forget to parse the JSON string to a Javascript array of objects before you create the grid.

Load JSON using jQuery

If you're already including jQuery, there's no need to re-invent the wheel:

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

That looks nice & clean! jQuery's getJSON method automatically parses the JSON for you.

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 jsonlint.com to check.