0

I am trying to create a table using Dynatable to show data which is provided on a remote URL

I am testing out a class management solution called Jackrabbit, which provides an endpoint (here - which has my sample data) containing class lists in JSON.

I've looked at dynatable not creating table from remote JSON & Load remote JSON from Dynatable but I haven't been able to figure out a solution.

I've been working in this JS Fiddle

JS:

$(document).ready(function(){$.getJSON("https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJSON?orgID=537284", function(data) {
$("#classes").dynatable({
    dataset: {
        records: data
    }
});

});})

The external JSON file contains many different fields, but I am only using some of them for the table. Is anyone able to point me in the right direction?

Community
  • 1
  • 1
Piklet
  • 31
  • 3

1 Answers1

0

Your script's dataset records data are not pass properly table structural way. Just replace your script with follows and don't forget to fill blank data array value with from data_value ( I added only name and instructions, please set others data ) - 

$(document).ready(function(){$.getJSON("https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJSON?orgID=537284", function(data) {
    var data_arr = [];
    $.each(data.rows, function(key, data_value){
  data_arr.push({
    'name' : data_value.name,
    'instructors' : data_value.instructors[0],
    'meeting_days' : '',
    'min_age' : '',
    'openings' : '',
    'start_time' : '',
    'tuition' : '',
  });
});
$("#classes").dynatable({
  dataset: {
    records: data_arr
  }
});});});
itzmekhokan
  • 2,597
  • 2
  • 9
  • 9
  • Thank you! This worked. I've managed to use this to get all the columns working, expect the days. I'd like to return the day a class is running. However, I notice in the JSON it is returned like: `"meeting_days":{"mon":false,"tue":false,"wed":false,"thu":false,"fri":true,"sat":false,"sun":false}`, how would I go about turning this into a singular day (or multiple days if that's the case to be returned)? Here's my JSFiddle of what I've got so far: https://jsfiddle.net/pikles/8teow27L/30/ – Piklet May 02 '19 at 12:05
  • @Piklet it seems that `meeting_days` itself a jquery object so you needs to convert it to string first. Just add this `$.each(data_value.meeting_days, function(day, flag){ if(flag) meeting_days.push(day); }); meeting_days = meeting_days.join(', ');` before `data_arr.push` bind and replace day data with `'day' : meeting_days,` – itzmekhokan May 03 '19 at 13:49