current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

I get Json data from server in order to display information by using DataTables.

In this json, there are rows, where in a column there may exist more than one value, so it's a multidimensional array as follows (I show just an excerpt 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 works fine so far:

$('#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>');
});

The date column values are displayed fine, however, for the researcherscolumn only [object Object] is displayed. If I try to use a nested $.each() as follows:

$('#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 don't get anything, I just see a DataTables message saying Sorry, no results found.

What am I missing? Any ideas?

Solution

Thanks to BLSully:

The working code looks as follows:

  var table = $('#table_id').DataTable({
    columns: [{
      data: 'researchers[, ].name',
      title: 'Researchers'
    }, {
      data: 'date',
      title: 'Date'
    }]  
  });

  table.rows.add(data).draw();

And that was it.

share|improve this question
2  
are you using jQuery DataTables plugin? If so, this is entirely the wrong approach to inserting data. Please visit the api documentation, specifically the rows.add() method as well as column definitions –  BLSully 2 days ago
1  
concur with @BLSully. Best option would be to use ajax sourced data and format it correctly serverside. datatables.net/manual/data –  billynoah 2 days ago

2 Answers 2

up vote 3 down vote accepted

I'm assuming based on your wording, you're using datatables. Given that, I'm going to provide an alternate example of handling databinding to your table that utilizes the design of the plugin rather than manual DOM manipulation. So.. this isn't exactly an answer to the question, but rather a suggestion of the proper way of doing what you're trying to achieve (given the context you've provided. Depending on how your retrieving your data, there may be some slight changes)

The correct way to add orthogonal json data to your table is by creating column definitions so the table knows which columns to display your data, along with rules around how it's to be displayed.

I set up an example based on your data (expanded a bit to explain how to deal with deeply nested objects and arrays). The really relevant bit is the data property on the first column: researchers[, ].name. The syntax of that value instructs datatables to treat the property researchers as an array, and displaying it in a comma-separated fashion. Because the array elements are JavaScript objects, the .name following the square brackets instructs DataTables on which property of the object 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>

share|improve this answer
    
Wow! That did the trick! ☺ Thanks a lot. –  pathros yesterday
up vote 0 down vote

Try This ...

First of all save the json string in 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>');
});
share|improve this answer
    
I still get the no results found message :/ –  pathros 2 days ago
    
There were some spelling mistake .. please check now .. –  Vinay 2 days ago
    
@pathros If you got the answer please mark it .. checked .. –  Vinay yesterday
    
I worked it out for a long while and could not get it to work :/ –  pathros yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.