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.

Answer 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"}
        ]
    });
} );

Answer 2

Minor changes:

1. , missing after data option
2. Column is passed as favourite_team (British english) but data has favorite_team (American English)
3. Column contains hobbies where as data contains hobbies in the first row while hobbie in the other rows. You gotta match them.
4. 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.