Javascript JSON data with DataTables

Question

I am using a JavaScript with jQuery DataTables but I have been having problem in loading the JSON data into the Bootstrap table.

This is a sample of the table

[ { name: 'Bryant Stone',       hobbies: 'Football',       favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith',        hobbies: 'boxing',          favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef',       hobbies: 'cooking',         favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
]

In JavaScript I get the data in this format and put it inside JavaScript like this

$(document).ready(function(){
    $(\'#respondent\').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
                {title:"Name", data: "name"},
                {title:"Hobbies", data: "hobbies"},
                {title:"Favorite team" ,data: "favorite_team"},
                {title: "Height" ,data: "height"}
            ]
    });
})

When I load the page it shows my data in the console but a DataTables dialog box shows this message

DataTable warning table id=respondent-
Requested unknown parameter 'name' for
row0, column 0. For information more.....

I don't know what else I can do. It has taken the whole day from me. Any help would be appreciated.

UPDATE Thanks to all who helped by providing some answers all of which i have done. This is my html

<table class="display" id="respondent">
    <thead>

        <tr>

            <th>Name</th>
            <th>Hobbies</th>
            <th>Favorite Team</th>
            <th>Height</th>
        </tr>

    </thead>
</table>

I have made needed typo correction to the code displayed earlier but I still keep on getting this error message

DataTables warning: table id=respondent- 
Requested unknown parameter 'name' for 
row 0, column 0, for more information about this 
error, please see http://datatables.net/tn/4

I went to the link but could not get anything helpful. After the above message, the table get filled up with empty spaces and after going to some pages I see just one character in the first cell only. Those characters either letter or braces I do not know where they came from because I could not see such sequence in my json data even numbers shows up. It keeps on baffling me I do not know what else to do. Any help would be appreciated.

UPDATE I discovered that the problem was that the data was in a string. Does anyone know how to convert string in javascript to object without using eval(). JSON.parse return string and not object which is what is being looked for.

There is absolutely nothing wrong with that code (in order to make it work) -> jsfiddle.net/wkf2z48t — davidkonrad
– davidkonrad, Commented Aug 24, 2018 at 9:03

Shashank · Accepted Answer · 2018-08-23 20:14:08Z

1

Minor changes:

, missing after data option
Column is passed as favourite_team (British english) but data has favorite_team (American English)
Column contains hobbies where as data contains hobbies in the first row while hobbie in the other rows. You gotta match them.
Use title option in the columns to show the header name

Info: That error/alert is usually due to missing columns in the data.

Here's a code snippet fixing the above:

$(document).ready(function(){
    
var jsonStr1 = [ { name: 'Bryant Stone',       hobbies: 'Football',       favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith',        hobbies: 'boxing',          favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef',       hobbies: 'cooking',         favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
];

    $('#respondent').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
                {title: "name", data: "name"},
                {title: "hobbies", data: "hobbies"},
                {title: "favorite_team", data: "favorite_team"},
                {title: "height", data: "height"}
            ]
    });
})

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>


<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="respondent" class="display">
  <thead>
    
  </thead>
  <tbody>
    
  </tbody>
</table>

Hope this helps.

edited Aug 23, 2018 at 20:14

answered Aug 23, 2018 at 19:48

Shashank

5,6701 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

J.Whit Over a year ago

thanks, i have made needed changes, and added title options but it the same thing with the error message

Shashank Over a year ago

Can you match your code with the one I’ve posted? If it still doesn’t work, could you please post your new code with the changes?

J.Whit Over a year ago

thanks code has been updated. Modification has been shown. Appreciate your help. I hope that I can get this completed

Shashank Over a year ago

Seems like it is working fine. Here's a jsfiddle with your code: jsfiddle.net/ohj926xm

J.Whit Over a year ago

It was a problem of converting a string to object.

Naga Sai A · Accepted Answer · 2018-08-24 04:24:33Z

1

Typo errors of column names - hobbies are mentioned as "hobbie" and favourite_team as favorite_team.

Maintain same property names for all objects to avoid that error

Code sample for reference - https://codepen.io/nagasai/pen/vzNXPe

HTML:

<table class="display" id="respondent">
    <thead>

        <tr>

            <th>Name</th>
            <th>Hobbies</th>
            <th>Favorite Team</th>
            <th>Height</th>
        </tr>

    </thead>
</table>

JS

var jsonStr1 = [ { name: 'Bryant Stone',  hobbies: 'Football', favorite_team: 'Sea hawks',       height: '5 Feet 10 in' },
  { name: 'Jesse Smith', hobbies: 'boxing', favorite_team: 'Spurs',           height: '6 feet 6 in' },
  { name: 'Emily Wyclef', hobbies: 'cooking',  favorite_team: 'Venus Williams',  height: '5 feet 2 in' }
]

$(document).ready(function() {
 $('#respondent').dataTable({
        destroy: true,
        data: jsonStr1,
        columns:[   
            {title:"Name", data: "name"},
            {title:"Hobbies", data: "hobbies"},
            {title:"Favorite team" ,data: "favorite_team"},
            {title: "Height" ,data: "height"}
        ]
    });
} );

edited Aug 24, 2018 at 4:24

answered Aug 23, 2018 at 19:50

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

3 Comments

J.Whit Over a year ago

thanks for the help, I have made the changes but thng still remains the same

Naga Sai A Over a year ago

Can you try to replace your code with my code and try ??

Naga Sai A Over a year ago

updated codepen and answer, not seeing any error from my side , are you using any css from your side?- codepen.io/nagasai/pen/vzNXPe

Collectives™ on Stack Overflow

Javascript JSON data with DataTables

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related