JSFiddle - React, Tailwind, and code Playground

by Jane Wilkie

HTML

<TABLE id="myTable">
<thead>
<TR><TD>Error</TD><TD>newview</TD><TD>oldview</TD><TD>noview</TD><TD>someview</TD><TD>TOTALS</TD></TR>
</thead>
<tbody></tbody>
</TABLE>

JavaScript

var myData = [
  [{
    "timeBucket": 1472058000000,
    "errors": 534,
    "errorFree": 0,
    "business": 0,
    "errorRate": 1.0,
    "breakdown": [{
      "type": "newview",
      "count": 359,
      "errorRate": 1.0
    }, {
      "type": "oldview",
      "count": 169,
      "errorRate": 1.0
    }, {
      "type": "noview",
      "count": 6,
      "errorRate": 1.0
    }]
  }],
  [{
    "timeBucket": 1472061600000,
    "errors": 537,
    "errorFree": 0,
    "business": 0,
    "errorRate": 1.0,
    "breakdown": [{
      "type": "newview",
      "count": 338,
      "errorRate": 1.0
    }, {
      "type": "oldview",
      "count": 184,
      "errorRate": 1.0
    }, {
      "type": "noview",
      "count": 14,
      "errorRate": 1.0
    }, {
      "type": "someview",
      "count": 1,
      "errorRate": 1.0
    }]
  }]
];

var result = [];

myData.map( function (item) {
myData.forEach(function(ele, idx) {
  var count = ele[0].breakdown.filter(function(ele, idx) {
    return ele.type == item;
  })[0];
  count = (count === undefined) ? 0 : +count.count
  var some = (typeof ele[0].breakdown[3] === "undefined")?0:ele[0].breakdown[3].count
  result.push(
    [ele[0].timeBucket, parseFloat(ele[0].errors), ele[0].breakdown[0].count,ele[0].breakdown[1].count,ele[0].breakdown[2].count,some])    
    }); 
});
var rows = "";
$.each(result,function(i,item){
   rows += "<tr>";
   rows += "<td>"+item[0]+"</td><td>"+item[2]+"</td><td>"+item[3]+"</td><td>"+item[4]+"</td><td>"+item[5]+"</td><td>"+item[1]+"</td>";
   rows += "</tr>";
})

$('#myTable > tbody').html(rows);