javascript - 用json数据形成表格

Question

我想为 json 数据形成表格。我删除了引号、逗号和花括号。并尝试为地理、会议哈希和计数添加表。现在只能添加空间。

const summary_data=[{Geo: "US West", MeetingHash: "Hold/Uncategorized", count: 65},
    {Geo: "NSU", MeetingHash: "Hold/Uncategorized", count: 9}, 
     {Geo: "US East", MeetingHash: "Hold/Uncategorized", count: 3}];
  
       var str="";
        $.each(summary_data, function (key, entry) {
           str += "<tr><td>\r\n"+JSON.stringify(entry) .replace(/,|\{|\}|\"/g," ") + "\n</td></tr>";
         });
            console.log(str);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

标签： javascripthtmljquery

Answer 1

用键作为表中的标题..

const summary_data = [{ Geo: "US West", MeetingHash: "Hold/Uncategorized", count: 65 },
  { Geo: "NSU", MeetingHash: "Hold/Uncategorized", count: 9 },
  { Geo: "US East", MeetingHash: "Hold/Uncategorized", count: 3 }];
  var val = summary_data[0];
  var table = `<table><tr>`;
  Object.keys(val).forEach(function (key) {
     table += `<th>${key}</th>`;
  });
  table += '</tr>';
  for (var i in summary_data) {
     table += '<tr>';
     var val = summary_data[i];
     Object.keys(val).forEach(function (key) {
        table += `<td>${val[key]}</td>`;
     });
     table += '</tr>';
  }
  table += '</table>';
  console.log(table);
  $('body').html(table);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>