Daniel Ellison Daniel Ellison - 6 months ago 43
Javascript Question

Basic Timesheet table - Using ajax requests and jquery

Im basically building a very basic timesheet page. I am having problems getting the output onto a basic HTML table. Problem is, I got 2 list of data, one being the parent and the other the child. Child contains the ID of the parent and im having issues finding an easy way to merge the parent/child data together and output them to look something like this:

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 ...


All these fields are entered manually, and I just want to simply output them on a table to review the entered data.

I got started on an example page to show my progress so far:

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

Here is my code so far:

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);
}
});


Its with the second Ajax where I cant find a way to look trough the existing array, match the child's ID_of_parent to the parent's ID and merge the data.

Then I hoping to do something like

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>");
});


Would anyone know how to accomplish this?

Answer

https://jsfiddle.net/tj6bcjos/9/ tested. data1 is the parent, data2 is the children

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);
}
Comments