JQuery how to implement nested $ .each () in DataTables
I am receiving Json data from server to display information using DataTables.
This json has rows where the column can have more than one value, so it is a multidimensional array like this (I'm only showing a snippet of the array):
{
"info_table": [
{
"date": "2015-01-06",
"subject": "Some subject or title",
"type": "article",
"url": null,
"pdf": null,
"notes": null,
"created_at": "2015-06-26 13:38:53",
"updated_at": "2015-06-26 13:38:53",
"institute": "Some Institute name",
"researchers": [
{
"name": "CARL SMITH"
}
],
"assistants": [
{
"name": "YULIA SMIRNOVA"
}
]
}
]
}
The DataTable now works fine:
$('#notes_table table').append('<thead><tr><th>Researchers</th><th>Date</th></tr></thead><tbody></tbody>');
$.each(response.info_table,function(i,item){
$('#notes_table').find('tbody').append('<tr><td>'+item.researchers+'</td><td>'+item.date+'</td></tr>');
});
Column values are date
displayed accurately, however, column values are researchers
displayed only [object Object]
. If I try to use nested $ .each () like this:
$('#notes_table table').append('<thead><tr><th>Researchers</th><th>Date</th></tr></thead><tbody></tbody>');
$.each(response.info_table,function(i,item){
$.each(item.researchers, function(j,item2){
$('#notes_table').find('tbody').append('<td>'+item2.name+'</td>');
});
$('#notes_table').find('tbody').append('<td>'+item.date+'</td>');
});
I am not getting anything, I just see the DataTables message that says Sorry, no results found
.
What am I missing? Any ideas?
Decision
Thanks BLSully:
The working code looks like this:
var table = $('#table_id').DataTable({
columns: [{
data: 'researchers[, ].name',
title: 'Researchers'
}, {
data: 'date',
title: 'Date'
}]
});
table.rows.add(data).draw();
And it was.
source to share
I am based on your formulation, you are using datatables . With that in mind, I'm going to provide an alternative example of handling data binding to your table that uses plugin design rather than manual DOM manipulation. So, this is not really an answer to this question, but rather a guess about the correct way of doing what you are trying to achieve (given the context you have provided. Depending on how you retrieve your data, there will be small changes)
The correct way to add orthogonal json data to your table is to create column definitions, so the table knows which columns are displaying your data as well as the rules on how to display it.
I created an example based on your data (expanded somewhat to explain how to work with deeply nested objects and arrays). Indeed the corresponding bit - this property is data
in the first column: researchers[, ].name
. The syntax for this value tells datatables to treat the property researchers
as an array and display it comma separated. Since the array elements are JavaScript objects .name
, the following after the square brackets indicates the DataTables by which the object property should be displayed.
http://live.datatables.net/domivewi/1/
var data = [
{
"date": "2015-01-06",
"subject": "Some subject or title",
"type": "article",
"url": null,
"pdf": null,
"notes": null,
"created_at": "2015-06-26 13:38:53",
"updated_at": "2015-06-26 13:38:53",
"institute": "Some Institute name",
"researchers": [{
"name": "CARL SMITH"
},{
"name": "JOHN DOE"
}],
"assistants": [
{
"name": "YULIA SMIRNOVA"
}
]
},{
"date": "2015-01-06",
"subject": "Some subject or title",
"type": "article",
"url": null,
"pdf": null,
"notes": null,
"created_at": "2015-06-26 13:38:53",
"updated_at": "2015-06-26 13:38:53",
"institute": "Some Institute name",
"researchers": [{
"name": "FRED FLINSTONE"
},{
"name": "WILMA FLINTSTONE"
}],
"assistants": [
{
"name": "BARNEY RUBBLE"
}
]
}
];
var table = $('#demo').DataTable({
columns: [{
//this is the important bit here. See explanation above
data: 'researchers[, ].name',
title: 'Researchers'
}, {
data: 'date',
title: 'Date'
}]
});
//this line adds new rows to the table and redraws
table.rows.add(data).draw();
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.container {
min-width: 980px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<table id="demo"></table>
</body>
</html>
source to share
Try it...
First of all, store the json string in a javascript array.
Like this...
var myArray = Array();
myArray = {
"info_table": [
{
"date": "2015-01-06",
"subject": "Some subject or title",
"type": "article",
"url": null,
"pdf": null,
"notes": null,
"created_at": "2015-06-26 13:38:53",
"updated_at": "2015-06-26 13:38:53",
"institute": "Some Institute name",
"researchers": [
{
"name": "CARL SMITH"
}
],
"assistants": [
{
"name": "YULIA SMIRNOVA"
}
]
}
]
}
// Then Execute like this ..
$('#notes_table table').append('<thead><tr><th>Researchers</th><th>Date</th></tr></thead><tbody></tbody>');
$.each(myArray.info_table,function(i,item){
for( var i; i < item.researchers.length, i++){
$('#notes_table').find('tbody').append('<td>'+item.researchers[i].name+'</td>');
});
$('#notes_table').find('tbody').append('<td>'+item.date+'</td>');
});
source to share