CODEWITHSUNDEEP
javascriptjqueryjsondatatables
bojackhorseman99
bojackhorseman99

Reputation: 329

Filling a Datatable with a JSON from an API

   <body>
       <table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Height</th>
            <th>hair_color</th>
            <th>skin_color</th>
            <th>gender</th>

        </tr>
    </thead>

</table>
</body>

This is my table HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
$('#example').DataTable( {
ajax: {
    url: 'https://swapi.co/api/people/1/',
    dataSrc: ''
},
 columns: [
    { data: 'name' },
    { data: 'height' },
    { data: 'hair_Color' },
    { data: 'skin_color' },
    { data: 'gender' }

               ]
           } );
      });
   </script>

This are my scripts. I know that there are some threads about this same thing but i had no luck getting it to work, i checked Datatables documentation to try different ways but no luck, its not filling the table. The API returns me this:

 {
"name": "Luke Skywalker", 
"height": "172", 
"mass": "77", 
"hair_color": "blond", 
"skin_color": "fair", 
"eye_color": "blue", 
"birth_year": "19BBY", 
"gender": "male", 
"homeworld": "https://swapi.co/api/planets/1/", 
"films": [
    "https://swapi.co/api/films/2/", 
    "https://swapi.co/api/films/6/", 
    "https://swapi.co/api/films/3/", 
    "https://swapi.co/api/films/1/", 
    "https://swapi.co/api/films/7/"
], 
"species": [
    "https://swapi.co/api/species/1/"
], 
"vehicles": [
    "https://swapi.co/api/vehicles/14/", 
    "https://swapi.co/api/vehicles/30/"
], 
"starships": [
    "https://swapi.co/api/starships/12/", 
    "https://swapi.co/api/starships/22/"
], 
"created": "2014-12-09T13:50:51.644000Z", 
"edited": "2014-12-20T21:17:56.891000Z", 
"url": "https://swapi.co/api/people/1/"
 }

Here its also a Fiddle: https://jsfiddle.net/dpq7v6ba/5/

Upvotes: 3

Views: 3420

Answers (1)

C.Morris0987
C.Morris0987

Reputation: 34

Even you want to use object as your datasource, but your data still need to live inside a property which is need to be an array, like :

{
 count:30,
 data:[{...},{...},{...}......]
}

Since you want to make a list table on the screen, you should use the api that will return multiple result but not the single result api, in your api url, that is https://swapi.co/api/people/ .

by default, this library will read data from an property named "data"...

But you can give the "dataSrc" argument point out where the dataTables library should go to read the data from the response json string,

the response of the api is an one level JSON object, the data is an array of the value of the "results" property.

And you hava a wrong property mapping in the "columns" argument which should be "hair_color", not "hair_Color"

so the code will become :

$(document).ready(function() {
    $('#example').DataTable( {
    ajax: {
        url: 'https://swapi.co/api/people/',
        dataSrc: 'results'
    },
     columns: [
        { data: 'name' },
        { data: 'height' },
        { data: 'hair_color' },
        { data: 'skin_color' },
        { data: 'gender' }

                     ]
              } );
            });

and then it will work. JSFiddle example

Upvotes: 1

Related Questions