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>

edit

Leave email to receive latest updates!