如何在带有JS和JQuery的表中显示JSON数据(没有适当的标签)？

Question

因此，我通过Ajax调用将JSON数据解析到前端。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

您需要为"num_meetings"中每个对象的每个值创建一个行("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