nuxy/tidy-table

How pass JSON data from URL?

bubnenkoff opened this issue · 1 comments

I have server that send as response JSON object. How to handle and display it with Tidy-Table?

nuxy commented

I have server that send as response JSON object. How to handle and display it with Tidy-Table?

You need to create an AJAX handler that parses the original JSON response in order to create the columnTitles and columnValues in the Tidy-Table required format.

Example:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);

    .. add preprocess logic

    // Required format
    var new_titles = ['Column A', 'Column B', 'Column C', 'Column D', 'Column E'],
        new_values = [
          ['1', '1A', '1B', '1C', '1D', '1E'],
          ['2', '2A', '2B', '2C', '2D', '2E'],
          ['3', '3A', '3B', '3C', '3D', '3E'],
          ['4', '4A', '4B', '4C', '4D', '4E'],
          ['5', '5A', '5B', '5C', '5D', '5E']
        ];

    // Initialize Tidy-Table
    document.getElementById('container')
      .TidyTable({
        columnTitles: new_titles,
        columnValues: new_values
      });
  };
};

xhr.open('GET', 'http://www.domain.com/data.json');
xhr.send(null);

Note:
This is one approach, of many, when constructing the dataset required by Tidy-Table