Javascript 如何使用JS和JQuery在表中显示JSON数据（没有正确的标签）？_Javascript_Jquery_Json

Javascript 如何使用JS和JQuery在表中显示JSON数据（没有正确的标签）？

javascript jquery json

Javascript 如何使用JS和JQuery在表中显示JSON数据（没有正确的标签）？,javascript,jquery,json,Javascript,Jquery,Json,因此，我通过Ajax调用将JSON数据解析到前端。JSON数据的格式如下所示： { "num_meetings":{ "EOF/TRiO":{ "4 Meetings":1, "11 Meetings":1 }, "Learning Center":{ "1 Meetings":8, "2 Meetings":10, "3 Meetings":4,

因此，我通过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
      }
   }
}

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

我将如何在前端的表格中显示它

我试图通过以下片段来解决这个问题：

  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”

中每个对象的每个值创建一行（

tr

）

所以，要做到这一点，用一种简单的方法，你需要两个循环。我在

num_meetings

键上循环，然后获取它的值，并在其中的所有值上循环。有点困惑，但是看看代码，我想你会理解的

var resp={
“味精”：{
“num_会议”：{
“EOF/TRiO”：{
“4次会议”：1，
“11次会议”：1
},
“学习中心”：{
“1次会议”：8次，
“2次会议”：10次，
“3次会议”：4，
“4次会议”：9，
“5次会议”：2次，
“6次会议”：1，
“7次会议”：2，
“8次会议”：1，
“13次会议”：1
},
“学生成功教练办公室”：{
“3次会议”：2，
“4次会议”：1
}
}
}
}
//--现在让我们来处理数据--\\
var tabular=分别召开的会议；
var html=“”；
html+=“”；
html+=“地点会议趋势”；
用于（以表格形式输入）{
设obj=表格[键]
for（让innerKey输入obj）{
html+=`；
html+=`${key}`；
html+=`${innerKey}`；
html+=`${obj[innerKey]}`；
html+=`；
}
};
document.body.innerHTML=html

td{
边框：1px实心
}

您需要为

“num_会议”中每个对象的每个值创建一行（tr
）
所以，要做到这一点，用一种简单的方法，你需要两个循环。我在num_meetings
键上循环，然后获取它的值，并在其中的所有值上循环。有点困惑，但是看看代码，我想你会理解的

var resp={
“味精”：{
“num_会议”：{
“EOF/TRiO”：{
“4次会议”：1，
“11次会议”：1
},
“学习中心”：{
“1次会议”：8次，
“2次会议”：10次，
“3次会议”：4，
“4次会议”：9，
“5次会议”：2次，
“6次会议”：1，
“7次会议”：2，
“8次会议”：1，
“13次会议”：1
},
“学生成功教练办公室”：{
“3次会议”：2，
“4次会议”：1
}
}
}
}
//--现在让我们来处理数据--\\
var tabular=分别召开的会议；
var html=“”；
html+=“”；
html+=“地点会议趋势”；
用于（以表格形式输入）{
设obj=表格[键]
for（让innerKey输入obj）{
html+=`；
html+=`${key}`；
html+=`${innerKey}`；
html+=`${obj[innerKey]}`；
html+=`；
}
};
document.body.innerHTML=html
td{
边框：1px实心
}
Hi，尝试使用object.entries（您的对象名称）将对象转换为数组。它可能会帮助您在对象上循环。逗号❟ ❟ ❟ ❟ ❟ ❟ 是您的朋友，如果没有它，您的JSON无效。@CalvinNunes我添加了我对表的期望。关于第二个循环，你能更具体一点吗？你提供的JSON无效，每个值后面都缺少逗号。您可以使用来验证它并给它一个正确的格式。@Camilo它现在应该被修复了抱歉，我只是复制了它在控制台记录数据时吐回给我的格式。嗨，尝试使用object.entries（您的对象名称）将对象转换成数组。它可能会帮助您在对象上循环。逗号❟ ❟ ❟ ❟ ❟ ❟ 是您的朋友，如果没有它，您的JSON无效。@CalvinNunes我添加了我对表的期望。关于第二个循环，你能更具体一点吗？你提供的JSON无效，每个值后面都缺少逗号。您可以使用来验证它并为其提供正确的格式。@Camilo它现在应该已修复抱歉，我只是在控制台记录数据时复制了它吐回给我的格式。这很有意义，我被使用forEach时遇到的错误所困扰。谢谢你的解释！您的数据是如何自动排序的？我尝试了同样的方法，但我的根本没有排序。什么？你说的分类是什么意思？它只是遵循variableresp
中的硬编码数据结构……我在问题中添加了我的输出图片。我的JSON数据是按排序的，与您硬编码的方式相同，但当它输出数据时，它似乎是按随机顺序来的。如果它以正确的格式来自服务器，这很奇怪。。。但不要混用问题，因为你原来的问题已经得到了回答和解决，它可以被其他有相同问题的人使用，所以不要编辑它来添加更多的问题或改变它的本质。用你的新问题打开一个关于StackOverflow的新问题这很有意义，我一直被使用forEach时遇到的错误所困扰。谢谢你的解释！您的数据是如何自动排序的？我尝试了同样的方法，但我的根本没有排序。什么？你说的分类是什么意思？它只是遵循variableresp
中的硬编码数据结构……我在问题中添加了我的输出图片。我的JSON数据是按排序的，与您硬编码的方式相同，但当它输出数据时，它似乎是按随机顺序来的。如果它以正确的格式来自服务器，这很奇怪。。。但不要混用问题，因为你原来的问题已经得到了回答和解决，它可以被其他有相同问题的人使用，所以不要编辑它来添加更多的问题或改变它的本质。使用新问题打开有关StackOverflow的新问题