JSFiddle - React, Tailwind, and code Playground
JavaScript
var errorTypes = ["newview","oldview","noview","someview"]
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(data){
var res = [data[0].timeBucket];
var total = 0;
data[0].breakdown.forEach(function(bd){
if(errorTypes.indexOf(bd.type) != -1){
res[errorTypes.indexOf(bd.type) + 1] = bd.count;
total += bd.count;
}
});
res[1+errorTypes.length] = total;
console.log(res[4])
return res;
});
var lines = [
'Error',
'newview',
'oldview',
'noview',
'someview',
'TOTALS',
];
table = '<TABLE>' + lines.map(function(line, i){
line = '<TR><TD>' + line + '</TD>'
result.forEach(function(res){
line += '<TD>' + (res[i] || 0) + '</TD>';
})
line += '</TR>'
return line;
}).join("") + '</TABLE>'
document.body.insertAdjacentHTML("beforeend", table);
console.log(table);