Question

我基本上建立了一个非常基本的时间表页面。我在输出到基本HTML表时遇到问题。问题是，我有2个数据列表，一个是父项，另一个是孩子。 Child包含父级的ID，我有问题找到一种简单的方法将父/子数据合并在一起并输出它们看起来像这样：

ID  / Description  / Start            / End              / Hours    / Night or Day?
------------------------------------------------------------------------------
1    Description1   2016-05-31 10:00   2016-05-31 12:00     2         Day
                    2016-06-02 14:00   2016-06-02 15:00     1         Day
                    2016-06-04 19:00   2016-06-04 20:00     1         Night
------------------------------------------------------------------------------
2    Description2   2016-04-06 14:00   2016-04-02 15:00     1         Day
                    2016-06-02 18:00   2016-06-02 22:00     4         Night
------------------------------------------------------------------------------
3    Description3   2016-05-30 23:00   2016-05-31 00:00     1         Night
------------------------------------------------------------------------------
Etc ...

所有这些字段都是手动输入的，我只是想在表格上输出它们来查看输入的数据。

我开始使用示例页面来展示我目前的进展情况：

https://jsfiddle.net/tj6bcjos/2/

到目前为止，这是我的代码：

  data_array = {};

  $.ajax({
    url:"Ajax/Path1",           
    dataType: "json",
    cache: false,
    success: function (data) {

          data.d.results.forEach(function (data) {

        data_array[data.ID] = {};
        data_array[data.ID][data.description] = {};

        });//foreach end
              console.log(data_array);
    }//sucess end
  });

  $.ajax({
    url:"Ajax/Path2",           
    dataType: "json",
    cache: false,
    success: function (data) {

          data.d.results.forEach(function (data) {

        if (data_array[data.ID] === data.ID_of_parent) { data_array[data.data.ID_of_parent] = {}; }

        });//foreach end
            console.log(data_array);
    }
  });

它与第二个Ajax无法找到通过现有数组查找的方法，将子ID的ID_of_parent与父ID进行匹配并合并数据。

然后我希望做一些像

这样的事情

dara_array.forEach(function (data) {
    $("#my_table tbody").append("<tr>"+
    "<td>"+data.ID+"</td>"+
    "<td>"+data.Description+"</td>"+
    "<td>"+data.Start+"</td>"+
    "<td>"+data.End+"</td>"+
    "<td>"+data.Hours+"</td>"+
    "<td>"+data.Night_or_Day+"</td>"+  
    "</tr>"); 
});

有人知道如何做到这一点吗？

Answer 1

这是一个完整的解决方案。

var tableMaker = o => {var keys = Object.keys(o[0]),
                   rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                   : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                       rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),rowMaker(keys,"th"));
                   return "<table>" + rows + "</table>";
                  },
    results1 = [{
                ID: "17",
                description: "Description 1"
            }, {
                ID: "22",
                description: "Description 2"
            }, {
                ID: "34",
                description: "Description 3"
            }, {
                ID: "54",
                description: "Description 4"
            }],
    results2 = [{
                ID_of_parent: "17",
                Day_or_night: "day",
                Start: "2016-06-01 08:00",
                End: "2016-06-01 10:00",
                Hours: "2"
            }, {
                ID_of_parent: "17",
                Day_or_night: "day",
                Start: "2016-06-01 13:00",
                End: "2016-06-01 14:00",
                Hours: "1"
            }, {
                ID_of_parent: "17",
                Day_or_night: "night",
                Start: "2016-06-01 21:00",
                End: "2016-06-01 22:00",
                Hours: "1"
            }, {
                ID_of_parent: "22",
                Day_or_night: "day",
                Start: "2016-06-01 09:00",
                End: "2016-06-01 10:00",
                Hours: "1"
            }, {
                ID_of_parent: "22",
                Day_or_night: "day",
                Start: "2016-06-01 14:00",
                End: "2016-06-01 15:00",
                Hours: "1"
            }, {
                ID_of_parent: "54",
                Day_or_night: "day",
                Start: "2016-06-01 13:30",
                End: "2016-06-01 16:00",
                Hours: "2.5"
            }],
  desclut = results1.reduce((p,c) => (p[c.ID] || (p[c.ID] = c.description),p),{}),
   merged = results2.map(e => (e.Description = desclut[e.ID_of_parent], delete e.ID_of_parent,e)),
  myTable = tableMaker(merged);
document.write(myTable);

tableMaker函数是通用的，可以从对象数组中生成一个表。对象的属性必须相同，并且它们用于表头，每个对象构造一行及其值。

desclut是一个根据results1构建的查找表。通过这样做，我们防止对results2数组的每个元素使用array.find（）类型的昂贵搜索。

merged是我们得到的数组result1和result2以我们可以与tableMaker函数一起使用的形式合并。

如果要重新排序属性（表格标题），可以使用merged.reduce((p,c) => {sort the properties accordingly here},{})指令。

Answer 2

https://jsfiddle.net/tj6bcjos/9/ 测试。 data1是父级，data2是子级

for each (p in data1.d.results){
   var pId = p.ID;

  //find the child
  var children = data2.d.results.filter(function(d){

    return d.ID_of_parent == pId
  })

  var s=[], e=[], h=[], n=[] //start, end  hours...
  for each (c in children)
  {

      s.push(c.Start);
      e.push(c.End);
      h.push(c.Hours);
      n.push(c.Day_or_night);

  }
  var rw = '<tr><td>'+p.ID+'</td><td>'+p.description+'</td><td>'+
      s.join('<br>')+'</td><td>'+e.join('<br>')+'</td><td>'+h.join('<br>')
      +'</td><td>'+n.join('<br>')+'</td></tr>'
  console.log(rw)

    $('#my_table tbody').append(rw);
}

基本时间表表 - 使用ajax请求和jquery

2 个答案: