Docs
Getting Started
Working with Data
How Tos
Frameworks
How it's Made
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.