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. 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. Give jQuery some love!

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.