GridJS adding data to table using a JSON array

Question

I have a GridJS table in my project in javascript and I need to put data in it from a JSON array

let data = [{"nr": 1, "time": "26.000", "ao5": "26.000"},
{"nr": 2, "time": "27.000", "ao5": "27.000"},
{"nr": 3, "time": "28.000", "ao5": "28.000"}];

new gridjs.Grid({
  columns: [{
    id: 'nr',
    name: 'Nr.'
 }, {
    id: 'time',
    name: 'Time'
 }, {
    id: 'ao5',
    name: 'AO5'
 }],
  data: [
    data[0],
    data[1],
    data[2]
  ]
});

I tried using for loops, but that didn't work. If I try adding it manually then it works, but otherwise I have no clue what to do.

score 1 · Accepted Answer · answered Aug 02 '23 at 12:39

you can dynamically loop through your JSON array and generate the data array for the GridJS configuration. Here's how you can do it:

let data = [
{"nr": 1, "time": "26.000", "ao5": "26.000"},
{"nr": 2, "time": "27.000", "ao5": "27.000"},
{"nr": 3, "time": "28.000", "ao5": "28.000"}
];

let columns = [
{ id: 'nr', name: 'Nr.' },
{ id: 'time', name: 'Time' },
{ id: 'ao5', name: 'AO5' }
];

let gridData = data.map(item => ({
nr: item.nr,
time: item.time,
ao5: item.ao5
}));

new gridjs.Grid({
columns: columns,
data: gridData
}).render(document.getElementById('grid-container'));

GridJS adding data to table using a JSON array

1 Answers1