基本時間表表-使用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 ，可以將其與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);
}