Generating dynamic table in Javascript with JSON

Question

I want to make a Javascript table which is built with JSON. This JSON is sent from the backend ( using Django ) so it can be changed anytime. Name of the column would be the category. My JSON form looks like:

var data = [
{
    "title": "Leadership",
    "category": "humaninteraction"
},
{
    "title": "Maintenance procedures",
    "category": "procedures"
},
{
    "title": "Situational Awareness",
    "category": "environmentsituations"
},
{
    "title": "Self-Criticism",
    "category": "self"
},
{
    "title": "Tools",
    "category": "aircraft"
}];

Try jQGrid or Dhtmlx If you are looking for a framework, else you can iterate and build something on your own — Joy Biswas
– Joy Biswas, Commented Apr 26, 2016 at 20:11

DCruz22 · Accepted Answer · 2016-04-26 20:15:39Z

2

You can use $.getJSON() to get that JSON from the backend and use $.each() to build each row. Like this:

function generateTable(){    
    var rows = '';
    $.getJSON( "backend/method", function( data ) {
      $.each( data, function( key, val ) {
        rows += '<tr>';
        rows += '<td>' + data.title + '</td>';
        rows += '<td>' + data.category+ '</td>';
        rows += '</tr>';
      });
    });
    $('#tableId').append(rows);
}

answered Apr 26, 2016 at 20:15

DCruz22

8061 gold badge9 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generating dynamic table in Javascript with JSON

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related