How to populate Javascript table with JSON array?

Question

I have JSON array similar to this :

{"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}
]}

I have to populate table like this dynamically :

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

I don't know how to populate this as Javascript table. Could anyone please help me with this?

Answer 1

Use JSON.parse(//your json string). Now you can dynamically create rows by looping through this json array something like this--

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

Similarly append a new row for count :)

Answer 2

Try creating valid json array of objects , utilizing $.each() , .after() , Object.keys() ; table , tr, tbody , tr , td elements ; css

$(function() {
  var data = [{
    "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": "15:00",
      "Count": 70
    }, {
      "Time": "16:00",
      "Count": 40
    }]
  }];

  res = {};
  var table = $("<table><tbody></tbody></table>");
  $.each(data, function(key, value) {
    var name = Object.keys(value)[0];
    table.find("tbody")
    .append("<tr class=" + name + "><td>" + name + "</td></tr>");
    if (!res[name]) {
      res[name] = [];
    }

    $.each(value[name], function(index, obj) {
      res[name].push([obj.Count, obj.Time])
      table.append("<th>" + obj.Time + "</th>");
      return obj.Time
    });
    table.find("th").prependTo(table)
  });

  table.find("th:first").before("<th>Name</th>");

  $.each(res, function(index, count) {
    $("tr[class=" + index + "]", table).after(function() {
      return $.map(Array($("th", table).length - 1), function(v, k) {
        var html = count.filter(function(val) {
          return val[1] === $("th", table).eq(k + 1).text()
        });
        return "<tr><td>" + (!!html.length ? html[0][0] : 0) + "</td></tr>"
      })
    })
  });

  table.appendTo("body")
});

table tr:not([class]),
table th {
  display: inline-block;
}
table tr:not([class]) {
  width: 39px;
  position: relative;
  left: 44px;
  top:-24px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Answer 3

You would have to correct your data so it is a proper object as show in the demo below.

• First so that you may be able to iterate through the times combine all the array data into array, say a
• Iterate through the keys of the object and the iterate through the elements of a
• If current element of a exists in the value of the outer iteration, val, then output elm.Count, otherwise output 0.

var o = { 
    "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}
    ]
};
//merge arrays for purpose getting all times
var a = [];
$.each(o, function(k,v) {
    a = a.concat( v );
});

//select table
var table = $('table');

//create row to clone
var row = $('<tr/>');

//construct header
var theadRow = row.clone().html( '<th>Name</th>' );
$.each(a, function(i,v) {
    theadRow.append( '<th>' + v.Time + '</th>' );
});
//append header row to table
table.find('thead').append( theadRow );

//rows
var tbody = table.find('tbody');
$.each(o, function(key,val) {
    //construct row
    var tbodyRow = row.clone().html( '<th>' + key + '</th>' );
    $.each(a, function(index, elm) {
        tbodyRow.append( '<td>' + (val.indexOf( elm ) > -1 ? elm.Count : 0) + '</td>' );
    });
    //append row to table
    tbody.append( tbodyRow );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead></thead>
  <tbody></tbody>
</table>

Answer 4

var data = {
    "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}
    ]
};

var keys = Object.keys(data), times = {}, rows = {};

(function processData(){
 
    var row, key, r;
    
    for(key in data) {
        row = rows[key] = {};
        for(r in data[key]) addInfo(row, data[key][r]);
    }
    
    function addInfo(row, record) {
        times[record.Time] = true;
        row[record.Time] = record.Count;
    }
    
})();

(function createTable() {
    
    var key,
        count,
        time,
        tr = $('<tr>'),
        $body = $('body'),
        $table = $('<table>'),
        $thead = $('<thead>'),
        $tbody = $('<tbody>');
    
    $body.append($table);
 $table.append($thead);
    $table.append($tbody);
    
    $thead.append(tr);
    
    tr.append('<th>name</th>');
    
    for(time in times) tr.append('<th>'+time+'</th>');
   
    for(key in rows) {
        tr = $('<tr>');
        tr.append('<th>'+key+'</th>');
        for(time in times) {
         count = (rows[key][time] || 0);
            tr.append('<td>'+count+'</td>');
        }
        $tbody.append(tr);
    }
        
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>