Displaying nested json in an HTML table using ajax

Question

I have the following json data as an example below. However, I could not get it to be displayed in an html table.However, it only returns 3 columns which displays "undefined". How do I properly access my json data?

{
  "count": 3,
  "entries": [
    {
      "affiliation": "Establishment1",
      "city": "City1",
      "code": "Code1",
      "contact": "Contact1",
      "firstname": "firstname1",
      "lastname": "lastname1",
      "middleinitial": "middleinitial1"
    },
    {
      "affiliation": "Establishment2",
      "city": "City2",
      "code": "Code2",
      "contact": "Contact2",
      "firstname": "firstname2",
      "lastname": "lastname2",
      "middleinitial": "middleinitial2"
    },
    {
      "affiliation": "Establishment3",
      "city": "City3",
      "code": "Code3",
      "contact": "Contact3",
      "firstname": "firstname3",
      "lastname": "lastname3",
      "middleinitial": "middleinitial3"
    },
  ],
  "status": "ok"
}

I have tried doing this to display it in an html table:

$(document).ready(function () {
    $.getJSON('http://127.0.0.1:5000/counselorss', function (data) {
        var mdata = '';
        $.each(data, function (key, value) {
            mdata += '<tr>';
            mdata += '<td>'+value.lastname + '</td>';
            mdata += '<td>'+value.firstname + '</td>';
            mdata += '<td>'+value.middleinitial + '</td>';
            mdata += '<td>'+value.contact + '</td>';
            mdata += '<td>'+value.affiliation + '</td>';
            mdata += '<td>'+value.city + '</td>';
            mdata += '<td>'+value.code + '</td>';
            mdata += '</tr>';
        });
        $('#counselorstable').append(counselor_data);
    });
});

Have you ever tried to do debug the data response ? Something like console.log(data). — ToujouAya
– ToujouAya, Commented Jun 26, 2018 at 11:59
Looks like you want $.each(data.entries, ...) here, not $.each(data, ...). — Daniel Beck
– Daniel Beck, Commented Jun 26, 2018 at 12:00

Siddharth Sarfale · Accepted Answer · 2018-06-26 12:13:07Z

1

Try this one:

    $(document).ready(function () {
    $.getJSON('http://127.0.0.1:5000/counselorss', function (data) {
        var mdata = '';
        data = JSON.parse(data);
        $.each(data['entries'], function (key, value) {
            mdata += '<tr>';
            mdata += '<td>'+value.lastname + '</td>';
            mdata += '<td>'+value.firstname + '</td>';
            mdata += '<td>'+value.middleinitial + '</td>';
            mdata += '<td>'+value.contact + '</td>';
            mdata += '<td>'+value.affiliation + '</td>';
            mdata += '<td>'+value.city + '</td>';
            mdata += '<td>'+value.code + '</td>';
            mdata += '</tr>';
        });
        $('#counselorstable').append(counselor_data);
    }); 
});

edited Jun 26, 2018 at 12:13

answered Jun 26, 2018 at 12:00

Siddharth Sarfale

945 bronze badges

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

Collectives™ on Stack Overflow

Displaying nested json in an HTML table using ajax

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