How to create matrix table

html, javascript, jquery

Solution

Try this

Live Demo

var reservations = [
    {"date":"22-12-2013","MCHC":"22","Pulse rate":"75","weight":"50" },
    {"date":"11-12-2013","CBC":"5"},
    {"date":"11-12-2013","weight":"55"}
];
var tbody = $('#reservations tbody'),
    props = ["date", "MCHC", "CBC", "Pulse rate", "weight"];
$.each(reservations, function(i, reservation) {
  var trid = reservation["date"];
    if($("#"+trid).length <= 0) {
      var tr = $('<tr>').attr("id",trid);
      $.each(props, function(i, prop) {
        var tdid = prop.replace(/\s/g, '');
        $('<td>').html(reservation[prop]).attr("id",tdid).appendTo(tr);  
      });
      tbody.append(tr);
    }
    else {
      $.each(props, function(i, prop) {
        var tdid = prop.replace(/\s/g, '');
          $("#"+trid).find("td#"+tdid).html(reservation[prop])
      });  
    }
});

Problem

I want to create dynamic matrix type data display using java script, html, and jquery which is shown here. ``` var reservations = [ {"date":"22-12-2013","MCHC":"22","Pulse rate":"75","weight":"50" }, {"date":"11-12-2013","CBC":"5"}, {"date":"11-12-2013","weight":"55"} ]; var tbody = $('#reservations tbody'), props = ["date", "MCHC", "CBC", "Pulse rate", "weight"]; $.each(reservations, function(i, reservation) { var tr = $('<tr>'); $.each(props, function(i, prop) { $('<td>').html(reservation[prop]).appendTo(tr); }); tbody.append(tr); }); ``` The problem is that the code is working properly but it does not display unique data based on date. For example, as shown in the above link "date:11-12-2013" is repeated twice which I don't want. I want to display unique data. My desired output is:

Original source