how to populate datatable using JSON array?

Question

I need to populate a datatable using JSON Array. In which first element is the table header and rest are table datas.

I used innerHTML to populate the table. It works and the table displays. But If I used this method the DataTable properties are lost like Fixed headers and columns.

I don't know how to populate the DataTable with JSON Array without losing the DataTable property.

My HTML page is

<div class="table-responsive">
        <table id="reportTable" class="table table-bordered table-striped" width="100%" cellspacing="0">
        </table>
    </div>

My JSON is

[{"c1":" ", "c2":"27/09", "c3":"26/09", "c4":"25/09", "c5":"24/09", "c6":"23/09", "c7":"22/09", "c8":"21/09", "c9":"20/09", "c10":"19/09", "c11":"18/09", "c12":"17/09", "c13":"16/09", "c14":"15/09", "c15":"14/09", "c16":"13/09", "c17":"12/09", "c18":"11/09", "c19":"10/09", "c20":"09/09", "c21":"08/09", "c22":"07/09", "c23":"06/09", "c24":"05/09", "c25":"04/09", "c26":"03/09", "c27":"02/09", "c28":"01/09", "c29":"31/08", "c30":"30/08", "c31":"29/08", "c32":"28/08", "c33":"Total"},{"c1":"TN36 AT 6622 ", "c2":"138.845", "c3":"11.5641", "c4":"2.73366", "c5":"547.84", "c6":"664.869", "c7":"458.4", "c8":"266.523", "c9":"144.365", "c10":"490.909", "c11":"709.604", "c12":"826.691", "c13":"524.266", "c14":"295.521", "c15":"1.15204", "c16":"0.425419", "c17":"0.43159", "c18":"0.391871", "c19":"300.124", "c20":"827.301", "c21":"780.874", "c22":"792.399", "c23":"67.4738", "c24":"300.649", "c25":"723.796", "c26":"855.125", "c27":"624.249", "c28":"172.467", "c29":"301.822", "c30":"497.332", "c31":"839.875", "c32":"705.905", "c33":"12873.92348"},{"c1":"TN36 AT 8743", "c2":"75.7291", "c3":"0", "c4":"54.24", "c5":"592.651", "c6":"694.377", "c7":"191.25", "c8":"3.19099", "c9":"504.844", "c10":"442.787", "c11":"214.88", "c12":"438.748", "c13":"502.649", "c14":"758.813", "c15":"986.827", "c16":"682.07", "c17":"232.872", "c18":"0.172057", "c19":"0", "c20":"0.492649", "c21":"913.408", "c22":"817.298", "c23":"898.346", "c24":"282.532", "c25":"568.261", "c26":"349.548", "c27":"477.219", "c28":"622.999", "c29":"1086.51", "c30":"707.454", "c31":"295.161", "c32":"0", "c33":"13395.328796"},{"c1":"TN36 AR 1146", "c2":"0", "c3":"475.559", "c4":"412.424", "c5":"626.597", "c6":"670.054", "c7":"192.42", "c8":"3.06767", "c9":"507.76", "c10":"448.085", "c11":"159.722", "c12":"86.188", "c13":"286.528", "c14":"315.573", "c15":"435.126", "c16":"161.092", "c17":"521.155", "c18":"784.174", "c19":"759.443", "c20":"440.643", "c21":"0", "c22":"270.703", "c23":"733.449", "c24":"735.629", "c25":"672.277", "c26":"499.787", "c27":"555.459", "c28":"462.563", "c29":"376.202", "c30":"629.249", "c31":"882.722", "c32":"841.416", "c33":"13945.06667"}]

do you know how to loop through that array and get data? do you know how to create table row w/ js? put those 2 together. SO is full of such info if you need help. — Mike B
– Mike B, Commented Sep 28, 2017 at 5:29
I believe you're looking for this... datatables.net/examples/api/add_row.html Just loop through the array. — Matthew
– Matthew, Commented Sep 28, 2017 at 5:30

Naren Murali · Accepted Answer · 2017-09-28 05:54:59Z

You can get the JSON and split it into columnsDefs and values using the below loops!

$(document).ready(function() {

  var dataSet = [{"c1":" ", "c2":"27/09", "c3":"26/09", "c4":"25/09", "c5":"24/09", "c6":"23/09", "c7":"22/09", "c8":"21/09", "c9":"20/09", "c10":"19/09", "c11":"18/09", "c12":"17/09", "c13":"16/09", "c14":"15/09", "c15":"14/09", "c16":"13/09", "c17":"12/09", "c18":"11/09", "c19":"10/09", "c20":"09/09", "c21":"08/09", "c22":"07/09", "c23":"06/09", "c24":"05/09", "c25":"04/09", "c26":"03/09", "c27":"02/09", "c28":"01/09", "c29":"31/08", "c30":"30/08", "c31":"29/08", "c32":"28/08", "c33":"Total"},{"c1":"TN36 AT 6622 ", "c2":"138.845", "c3":"11.5641", "c4":"2.73366", "c5":"547.84", "c6":"664.869", "c7":"458.4", "c8":"266.523", "c9":"144.365", "c10":"490.909", "c11":"709.604", "c12":"826.691", "c13":"524.266", "c14":"295.521", "c15":"1.15204", "c16":"0.425419", "c17":"0.43159", "c18":"0.391871", "c19":"300.124", "c20":"827.301", "c21":"780.874", "c22":"792.399", "c23":"67.4738", "c24":"300.649", "c25":"723.796", "c26":"855.125", "c27":"624.249", "c28":"172.467", "c29":"301.822", "c30":"497.332", "c31":"839.875", "c32":"705.905", "c33":"12873.92348"},{"c1":"TN36 AT 8743", "c2":"75.7291", "c3":"0", "c4":"54.24", "c5":"592.651", "c6":"694.377", "c7":"191.25", "c8":"3.19099", "c9":"504.844", "c10":"442.787", "c11":"214.88", "c12":"438.748", "c13":"502.649", "c14":"758.813", "c15":"986.827", "c16":"682.07", "c17":"232.872", "c18":"0.172057", "c19":"0", "c20":"0.492649", "c21":"913.408", "c22":"817.298", "c23":"898.346", "c24":"282.532", "c25":"568.261", "c26":"349.548", "c27":"477.219", "c28":"622.999", "c29":"1086.51", "c30":"707.454", "c31":"295.161", "c32":"0", "c33":"13395.328796"},{"c1":"TN36 AR 1146", "c2":"0", "c3":"475.559", "c4":"412.424", "c5":"626.597", "c6":"670.054", "c7":"192.42", "c8":"3.06767", "c9":"507.76", "c10":"448.085", "c11":"159.722", "c12":"86.188", "c13":"286.528", "c14":"315.573", "c15":"435.126", "c16":"161.092", "c17":"521.155", "c18":"784.174", "c19":"759.443", "c20":"440.643", "c21":"0", "c22":"270.703", "c23":"733.449", "c24":"735.629", "c25":"672.277", "c26":"499.787", "c27":"555.459", "c28":"462.563", "c29":"376.202", "c30":"629.249", "c31":"882.722", "c32":"841.416", "c33":"13945.06667"}];

var columnDefs = [];
//loop for populating column defs
for(let k in dataSet[0]){
	if(columnDefs.indexOf(k) === -1){
  	columnDefs.push({title: dataSet[0][k]});
  }
}
//loop for populating data
var data = [];
for(let j of dataSet){
	var arr = [];
	for(let k in j){
    if(columnDefs.indexOf(k) === -1){
      arr.push(j[k]);
    }
  }
  data.push(arr);  
}


  var myTable;

  myTable = $('#reportTable').DataTable({
    "sPaginationType": "full_numbers",
    data: data,
    columns: columnDefs
	});
});

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}

#reportTable * {
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<div class="container">
  <table cellspacing="0" class="dataTable table table-striped" id="reportTable">

  </table>
</div>

Thanks Naren. IT Works. But my first JSON element is the table header not keys. And also I want to give nowrap to the table datas.

Collectives™ on Stack Overflow

how to populate datatable using JSON array?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related