dynamically construct an ordered html table from a json object

Question

An ajax response is returning json object and I want to construct a table from. The json contain the column headers in an array and the actual data in another array of dictionaries. I want the table columns to be ordered according to the array of headers:

{
    "columns": ["id", "category"],
    "data":[
      {"category": "fruit","id": 1},
      {"category": "diary","id": 2}
    ]
}



  $(document).ready(function() {
    $("#submit").click(function(event) {
      $.ajax({
        data: {
          user: $('#user').val(),
        },
        type: 'POST',
        dataType: "json",
        url: '/process'
       })
        .done(function(response) {
         if (response.error) {
          alert('Error!');
        }
        else {
          var html = '<table class="table table-bordered"><thead><tr>';
          jQuery.each(response.columns, function(index, value) {
              html += "<th>" + value + "</th>"
          })
          html += "</tr></thead><tbody><tr>"
          jQuery.each(response.data, function(index, value) {
               jQuery.each(response.columns, function(idx, col) {
                    html+="<td>" + value[col] + "</td>"
               })
          })
          html+="</tr></tbody></table>"
          $(resulttable).append(html);
        }
       });
      event.preventDefault();
     });
    });

I'm getting a table like this:

id   category
1    fruit      2     diary

instead of 

id   category
1    fruit      
2    diary

patstuart · Accepted Answer · 2018-06-01 20:01:50Z

2

You need to create a new table row for each data row.

      html += "</tr></thead><tbody>"
      jQuery.each(response.data, function(index, value) {
           html += "<tr>"; //new code
           jQuery.each(response.columns, function(idx, col) {
                html+="<td>" + value[col] + "</td>"
           })
           html += "</tr>"; //new code
      })
      html += "</tbody></table>"

answered Jun 1, 2018 at 20:01

patstuart

1,9901 gold badge20 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

dynamically construct an ordered html table from a json object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related