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.


#grid {
  height: 400px;

#toolbar {
  background: var(--tableodd);
  margin-bottom: 12px;
  padding: 8px;

  display: flex;
  justify-content: space-between;

<div id="toolbar" class="dgxl-app">
    <input type="file" id="json-file" name="files-json" class="custom-file-input" accept=".json"><label for="json-file">Browse…</label>
  <button class="button" id="button-save">Save</button>

<div id="grid"></div>

<script src="https://code.datagridxl.com/datagridxl2.js"></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;


function onReaderLoad(e){

    var obj = JSON.parse(e.target.result);

    grid = new DataGridXL("grid", {
        data: obj

    // grid = new DataGridXL("grid", {
    //  data: obj
    // });


document.getElementById("button-save").onclick = function(){

Leave email to receive latest updates!