JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
</table>
JavaScript
// check if an element exists in array using a comparer function
// comparer : function(currentElement)
Array.prototype.inArray = function(comparer) {
for(var i=0; i < this.length; i++) {
if(comparer(this[i])) return true;
}
return false;
};
// adds an element to the array if it does not already exist using a comparer
// function
Array.prototype.pushIfNotExist = function(element, comparer) {
if (!this.inArray(comparer)) {
this.push(element);
}
};
var dataSet = [{
"Exception":null,
"ScorecardList":[
{
"Metrics":"Sev 1",
"ADAM":100,
"eTenet":40,
"BPM":10,
"DMC":0,
"EID":50
},
{
"Metrics":"Sev 2",
"ADAM":80,
"eTenet":100,
"BPM":0,
"DMC":20,
"EID":50
},
{
"Metrics":"Sev 3",
"ADAM":80,
"eTenet":100,
"BPM":100,
"DMC":50,
"EID":50
},
{
"Metrics":"Sev 4",
"ADAM":80,
"eTenet":0,
"BPM":0,
"DMC":0,
"EID":50
},
{
"Metrics":"Sev 5",
"ADAM":80,
"eTenet":0,
"BPM":60,
"DMC":80,
"EID":50
}
]
}];
var my_columns = [];
alert(dataSet[0].ScorecardList);
$.each( dataSet[0].ScorecardList[0], function( key, value ) {
var my_item = {};
my_item.data = key;
my_item.title = key;
alert(key + " " + value);
//my_columns.push(my_item);
my_columns.pushIfNotExist(my_item, function(e) {
return e.data === my_item.data && e.title === my_item.title;
});
});
console.log(my_columns);
console.log(dataSet[0].ScorecardList);
$(document).ready(function() {
$('#example').DataTable({
data: dataSet[0].ScorecardList,
"columns": my_columns
});
});