Как отобразить данные JSON (без правильных меток) в таблице с JS и JQuery?

Question

Таким образом, у меня JSON данные анализируются во внешнем интерфейсе через Ajax вызов. Формат данных JSON выглядит примерно так:

 { 
   "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
      }
   }
}

Как бы я отобразил это в таблице на переднем конце?

Я пытался приблизиться к этому с помощью этого фрагмента:

  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;

Я не уверен, как получить доступ к элементам внутри num_meetings.

Таблица может выглядеть примерно так :

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

Answer 1

Вам необходимо создать строку (tr) для каждого значения каждого объекта внутри "num_meetings".

Итак, для этого простым способом вам понадобятся два цикла. Я перебираю ключи num_meetings, затем получаю их значение и перебираю все значения внутри него. Немного смущает, но посмотрите код, и я думаю, вы поймете.

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 здесь не будет работать, поскольку resp.msg.num_meetings не массив, а объект, поэтому я использую for..in