Get data via XHR function

Fetch data from data.gov and parse the JSON.

import canvasDatagrid from 'canvas-datagrid';
import parseOpenData from '/open-data';

const xhr = new XMLHttpRequest();
const app = document.getElementById('app');
const grid = canvasDatagrid({
  parentNode: app,
});

grid.style.height = '300px';
grid.style.width = '100%';

xhr.addEventListener('progress', function (event) {
  grid.data = [
    {
      status:
        'Loading data: ' +
        event.loaded +
        ' of ' +
        (event.total || 'unknown') +
        ' bytes...',
    },
  ];
});

xhr.addEventListener('load', function (event) {
  grid.data = [{ status: 'Loading data ' + event.loaded + '...' }];
  const openData = parseOpenData(JSON.parse(this.responseText));

  grid.schema = openData.schema;
  grid.data = openData.data;
});

xhr.open(
  'GET',
  'https://data.cityofchicago.org/api/views/xzkq-xp2w/rows.json?accessType=DOWNLOAD',
);

xhr.send();