如何用JSON数组填充Javascript表？

我的JSON数组与此类似：

{"X":[
    {"Time":"05:45","Count":70},
    {"Time":"06:30","Count":40},
    {"Time":"08:15","Count":80}
]},
{"Y":[
    {"Time":"09:15","Count":70},
    {"Time":"10:30","Count":84},
    {"Time":"12:00","Count":95}
]},
{"Z":[
    {"Time":"14:00","Count":80},
    {"Time":"16:00","Count":70},
    {"Time":"15:00","Count":40}
]}

我必须像这样动态地填充表：

Name    05:45   06:30   08:15   09:15   10:30   12:00   14:00   16:00   15:00

  X       70      40       80     0       0       0       0       0       0
  Y        0       0        0     70     84       95      0       0       0 
  Z        0       0        0     0       0       0       80      70      40

我不知道如何将其填充为Javascript表。有人能帮我吗？

使用JSON.parse（//您的JSON字符串）。 现在，您可以通过这样的json数组来动态创建行--

var DataArray=JSON.parse（data.d）； var tableelement=$（“#数据集BL”）//从jquery获取表id append（createRow（DataArray））//从要显示表的操作调用此函数 函数createRow（Object）{//动态向表中添加行 var trElement=“；//根据您的需求进行设计 对于（var s=0；s使用JSON.parse（//您的JSON字符串）。 现在，您可以通过这样的json数组来动态创建行--

var DataArray=JSON.parse（data.d）； var tableelement=$（“#datasetbl”）；//从jquery获取表id tableelement.append（createRow（DataArray））；//从要显示表的操作调用此函数 函数createRow（Object）{//动态向表中添加行 var trElement=“；//根据您的需求进行设计

---

对于（var s=0；s尝试创建有效的

json

对象数组，使用

$.each（）

，

.after（）

，

Object.keys（）

；

table

，

tbody

，

tr

，

td

元素；

css

$（函数（）{
风险值数据=[{
“X”：[{
“时间”：“05:45”，
“计数”：70
}, {
“时间”：“06:30”，
“计数”：40
}, {
“时间”：“08:15”，
“计数”：80
}]
}, {
“Y”：[{
“时间”：“09:15”，
“计数”：70
}, {
“时间”：“10:30”，
“计数”：84
}, {
“时间”：“12:00”，
“计数”：95
}]
}, {
“Z”：[{
“时间”：“14:00”，
“计数”：80
}, {
“时间”：“15:00”，
“计数”：70
}, {
“时间”：“16:00”，
“计数”：40
}]
}];
res={}；
变量表=$（“”）；
$。每个（数据、函数（键、值）{
var name=Object.keys（值）[0]；
表.查找（“tbody”）
.append（“+name+”）；
如果（！res[name]）{
res[name]=[]；
}
$.each（值[名称]，函数（索引，obj）{
res[name].push（[obj.Count，obj.Time]）
table.append（“+obj.Time+”）；
返回目标时间
});
表.find（“th”）.prependTo（表）
});
表.在“名称”之前查找（“th:first”）；
$.each（res、函数（索引、计数）{
$（（tr[class=“+index+”]，表）。在（function（）之后）{
返回$.map（数组（$（“th”，table）.length-1），函数（v，k）{
var html=count.filter（函数（val）{
return val[1]==$（“th”，table）.eq（k+1）.text（）
});
返回“+（！！html.length？html[0][0]：0）+”
})
})
});
表.附录（“正文”）
})；

表tr:not（[class]），
表th{
显示：内联块；
}
表tr:not（[类]）{
宽度：39px；
位置：相对位置；
左：44px；
顶部：-24px；
}

---

尝试创建有效的

json

对象数组，利用

$.each（）

，

.after（）

，

对象.keys（）

；

表

，

tr

，

tbody

，

tr

，

td

元素；

css

$（函数（）{
风险值数据=[{
“X”：[{
“时间”：“05:45”，
“计数”：70
}, {
“时间”：“06:30”，
“计数”：40
}, {
“时间”：“08:15”，
“计数”：80
}]
}, {
“Y”：[{
“时间”：“09:15”，
“计数”：70
}, {
“时间”：“10:30”，
“计数”：84
}, {
“时间”：“12:00”，
“计数”：95
}]
}, {
“Z”：[{
“时间”：“14:00”，
“计数”：80
}, {
“时间”：“15:00”，
“计数”：70
}, {
“时间”：“16:00”，
“计数”：40
}]
}];
res={}；
变量表=$（“”）；
$。每个（数据、函数（键、值）{
var name=Object.keys（值）[0]；
表.查找（“tbody”）
.append（“+name+”）；
如果（！res[name]）{
res[name]=[]；
}
$.each（值[名称]，函数（索引，obj）{
res[name].push（[obj.Count，obj.Time]）
table.append（“+obj.Time+”）；
返回目标时间
});
表.find（“th”）.prependTo（表）
});
表.在“名称”之前查找（“th:first”）；
$.each（res、函数（索引、计数）{
$（（tr[class=“+index+”]，表）。在（function（）之后）{
返回$.map（数组（$（“th”，table）.length-1），函数（v，k）{
var html=count.filter（函数（val）{
return val[1]==$（“th”，table）.eq（k+1）.text（）
});
返回“+（！！html.length？html[0][0]：0）+”
})
})
});
表.附录（“正文”）
})；

表tr:not（[class]），
表th{
显示：内联块；
}
表tr:not（[类]）{
宽度：39px；
位置：相对位置；
左：44px；
顶部：-24px；
}

---

您必须更正数据，使其成为正确的对象，如下面的演示所示

• 首先，您可以遍历时间，将所有数组数据合并到数组中，例如

  a

• 遍历对象的键，并遍历

  a

• 如果外部迭代的值中存在

  a

  的当前元素

  val

  ，则输出

  elm.Count

  ，否则输出

  0

var o={
“X”：[
{“时间”：“05:45”，“计数”：70}，
{“时间”：“06:30”，“计数”：40}，
{“时间”：“08:15”，“计数”：80}
],
“Y”：[
{“时间”：“09:15”，“计数”：70}，
{“时间”：“10:30”，“计数”：84}，
{“时间”：“12:00”，“计数”：95}
],
“Z”：[
{“时间”：“14:00”，“计数”：80}，
{“时间”：“16:00”，“计数”：70}，
{"
 var DataArray = JSON.parse(data.d);
      var tableelement = $("#DataSetTbl");        //get table id from jquery

        tableelement.append(createRow(DataArray));            //call this function from the action you want to show table

    function createRow(Object) {                              //dynamically adding rows to the Table

        var trElement = "<tr>";                 //design this according to your requirement

  for(var s=0;s<Object.length; s++)
        trElement += "<td >" + Object[s].Time + "</td>";


        return trElement;
    }