Load and save JSON file
Load local JSON data
To display data from a local JSON-file, there's no need for a 3rd party Javascript plugin. Just use HTML5 FileReader API. If you don't have a JSON-file lying around, you can download this mock-up JSON file, then hand it over to the Browse-button.
Code
<style>
#grid {
height: 400px;
}
#toolbar {
background: #cbe4ff;
margin-bottom: 12px;
padding: 8px;
display: flex;
justify-content: space-between;
}
</style>
<div id="toolbar" class="dgxl-app">
<div>
<input type="file" id="json-file" name="files-json" class="custom-file-input" accept=".json"><label for="json-file">Browse…</label>
</div>
<button class="button" id="button-save">Save</button>
</div>
<div id="grid"></div>
<script src="https://code.datagridxl.com/datagridxl.js"></script>
<script>
var jsonFile = document.getElementById("json-file");
// create empty grid
var grid = new DataGridXL("grid", {
data: DataGridXL.createEmptyData(20,20)
});
jsonFile.onchange = function(e){
var reader = new FileReader();
reader.onload = onReaderLoad;
reader.readAsText(e.target.files[0]);
}
function onReaderLoad(e){
console.log(e.target.result);
var obj = JSON.parse(e.target.result);
grid.setData(obj);
// grid = new DataGridXL("grid", {
// data: obj
// });
}
document.getElementById("button-save").onclick = function(){
grid.downloadDataAsJSON();
}
</script>
