How to display JSON data (without proper labels) in a table with JS and JQuery?

Question

So I have JSON data being parsed to the front-end through Ajax call. The format of the JSON data looks something like this:

 { 
   "num_meetings":{ 
      "EOF/TRiO":{ 
         "4 Meetings":1,
         "11 Meetings":1
      },
      "Learning Center":{ 
         "1 Meetings":8,
         "2 Meetings":10,
         "3 Meetings":4,
         "4 Meetings":9,
         "5 Meetings":2,
         "6 Meetings":1,
         "7 Meetings":2,
         "8 Meetings":1,
         "13 Meetings":1
      },
      "Student Success Coach Office":{ 
         "3 Meetings":2,
         "4 Meetings":1
      }
   }
}

How would I display this in a table on the front end?

I was attempting to approach this with this snippet:

  var tabular = resp.msg.num_meetings;

  var html = "";
  html += "<table class='table small table-responsible-sm table hover table-sm table-stripped'>";
  html += `<tr><th>Location</th><th>Attended</th></tr>`;

  tabular.forEach(function(elem,index) {
    html += `<tr>`;
    html += `<td><b>${elem.???}</b></td>`;
    html += `</tr>`;
  });
  html += "</table>";
  return html;

I'm not sure how to access the elements inside num_meetings.

Table can look something like this:

----------------------------------
Location   | Meetings | Attendance
----------------------------------
EOF/TRio   | 4 Meetings | 1 
----------------------------------
EOF/TRio   | 11 Meetings | 1
----------------------------------
Learning Center ....

Answer 1

You need to create a row ( tr ) for each value of each object inside "num_meetings" .

So, to do that, in a simple way, you'll need two loops. I'm looping over num_meetings keys, then getting its value and looping over all values inside it. A little confusing, but look the code and I think you'll understand.

 var resp = { "msg": { "num_meetings": { "EOF/TRiO": { "4 Meetings": 1, "11 Meetings": 1 }, "Learning Center": { "1 Meetings": 8, "2 Meetings": 10, "3 Meetings": 4, "4 Meetings": 9, "5 Meetings": 2, "6 Meetings": 1, "7 Meetings": 2, "8 Meetings": 1, "13 Meetings": 1 }, "Student Success Coach Office": { "3 Meetings": 2, "4 Meetings": 1 } } } } //-- let's work with the data now --\\\\ var tabular = resp.msg.num_meetings; var html = ""; html += "<table class='table small table-responsible-sm table hover table-sm table stripped'>"; html += "<tr><th>Location</th><th>Meetings</th><th>Attendance</th></tr>"; for (let key in tabular) { let obj = tabular[key] for (let innerKey in obj) { html += `<tr>`; html += `<td>${key}</td>`; html += `<td>${innerKey}</td>`; html += `<td>${obj[innerKey]}</td>`; html += `</tr>`; } }; document.body.innerHTML = html

 td { border: 1px solid }

.forEach won't work here, since resp.msg.num_meetings is not an array but an object, thats why I'm using for..in