【问题标题】:Form the the table with json data用json数据形成表格
【发布时间】:2020-07-01 20:18:34
【问题描述】:

我想为 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);
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】:

  • 这是一个对象数组,而不是 JSON。实际数据不包含引号、逗号或花​​括号;这些都是 JS 用来将这些字符串和数字组织成有用的数据结构的对象字面量语法的一部分。这个问题是基于深刻的误解,所以很难给出一个有用的答案。 HTML 表格示例:jsfiddle.net/khrismuc/qvj15d30
  • 我尝试过 "\r\n"+JSON.stringify(entry) .replace(/,|\{|\}|\"/g," " ) + "\n";
  • @Chris G 用你的小提琴拯救我,谢谢

标签: javascript html jquery


【解决方案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);
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】:

  • HTML 字符串组合通常是不好的做法,尤其是对于表格。
猜你喜欢
  • 1970-01-01
  • 2021-02-27
  • 2016-10-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-06
  • 1970-01-01
相关资源
最近更新 更多