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

Question

我基本上正在构建一个非常基本的时间表页面。我在将输出输出到基本 HTML 表时遇到问题。问题是，我得到了 2 个数据列表，一个是父级，另一个是子级。子级包含父级的 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_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 构建的查找表。通过这样做，我们可以防止使用 array.find() 类型对 results2 数组的每个元素进行昂贵的搜索。

merged 是我们将 result1 和 result2 合并而成的数组，我们可以将其与 tableMaker 一起使用> 功能。

如果您想对属性(表头)重新排序，可以使用 merged.reduce((p,c) => {在此处相应地对属性进行排序},{}) 指令。