如何使用json数据创建表答案

【问题标题】：How to create table using json data如何使用json数据创建表
【发布时间】：2014-03-03 00:04:31
【问题描述】：

我的 json 部分：

var Json = {
 "Sample" : {
   "Sample Demo": {
     "1": {"JAN": {"ID": "1","Name": "Jim"}},
     "2": {"FEB": {"ID": "2","Name": "Jack" } }
    }},
 "Idname" : "2",
  "Date" : "01/28/2014",
  "State" : "1"
 }

我想从上面的 json 创建表。我的表头是 JAN、FEB，数据是 ID 和 Name。

【问题讨论】：

那么您是在“运行时”从 ajax 请求创建表吗？无论哪种方式，它都涉及嵌套的document.createElement('[HTML_ELEMENT]');s，当您遍历 json 对象时，其中 [HTML_ELEMENT] 应替换为 <table><tr><td>。

是的，json 的一部分将被替换为

这是我的 jsfiddle 但没有得到结果jsfiddle.net/5n2j7

仅供参考，DataTables 开箱即用

@balexandre 我希望使用 Handlebars 助手或自定义 js/jquery 来解决这个问题。

标签： javascript jquery json handlebars.js

【解决方案1】：

使用 jQuery：

var content = "<table>";
jQuery.each(Json.Sample["Sample Demo"], function(i, val) {
  jQuery.each(val, function(j, v) { content += "<tr><td>"+v.ID+","+v.Name +"</tr></td>";});
});
content += "</table>"

【讨论】：

我用上面的代码更新了你的 jsfiddle，它现在创建了所需的 HTML 表。
我也需要来自 json 的表头 JAN 和 FEB
不确定这与 ID/姓名数据的匹配度如何。请画出你想要的表格，这样我就可以大致了解标题与数据对应关系。无论如何，通过添加来自 json 的表头来更新小提琴。
这里是表结构jsfiddle.net/7X3JH。此外，我无法在您的小提琴中看到更新的标题。请检查我的表结构并提供小提琴..
如果您觉得这回答了您的问题，请帮助我接受它（单击空 v）。如果您有任何其他问题，请随时在此处发布，以便我们为您提供帮助 :) 您也可以点击我的头像了解更多信息

【解决方案2】：

看看this answer.

作者概述了以下解决方案：

在您的 HTML 中定义一个模板：

<script type="text/template" id="cardTemplate">
<div>
    <a href="{0}">{1}</a>
</div>
</script>

使用 string.format 替换变量：

var cardTemplate = $("#cardTemplate").html();
var template = cardTemplate.format("http://example.com", "Link Title");
$("#container").append(template); 

String.prototype.format = function() {
  var args = arguments;
  return this.replace(/{(\d+)}/g, function(match, number) { 
    return typeof args[number] != 'undefined'
      ? args[number]
      : match
    ;
  });
};

【讨论】：

您能否根据我的小提琴 jsfiddle.net/5n2j7 将此显示为工作演示
自己试一试，如果遇到麻烦，请让社区知道，然后我们可以从那里提供帮助。