Help filling Datatable with JSON from Api

boachorseman0309

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/"
}

My code is right here: https://jsfiddle.net/dpq7v6ba/33/

kthorngren

There are a couple issues. Your JSON response is not valid. The response has the above twice:

{
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
......
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "https://swapi.co/api/people/1/"
} {
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
......
    "url": "https://swapi.co/api/people/1/"
}

Datatables expects the response data to be in an array. Examples can be seen in the docs:
https://datatables.net/manual/data/#Data-source-types

Second you have two records but in the JSON they are not separated by a comma. The JSON response should look more like this:

[
  {
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
......
    "edited": "2014-12-20T21:17:56.891000Z",
    "url": "https://swapi.co/api/people/1/"
  },
  {
    "name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
......
    "url": "https://swapi.co/api/people/1/"
  }
]

It looks like your config will work once you get the JSON format correct. You can validate your JSON response here:
https://jsonlint.com/

Kevin

boachorseman0309

    <script type="text/javascript">
        $(document).ready(function() {
             var arreglo=['https://swapi.co/api/people/', 'https://swapi.co/api/people/?page=2'];
             $.each()
$('#example').DataTable( {

         ajax: {
    url: "https://swapi.co/api/people/",
    dataSrc: 'results'
},
 columns: [
    { data: 'name' },
    { data: 'height' },
    { data: 'hair_color' },
    { data: 'skin_color' },
    { data: 'gender' }

                 ]
          } );
        });
</script>

I make it work by using not a single JSON from people/1, but by using another JSON from /people, but the thing is that i need to populate it with the 87 characters but they are in different urls, how do i make multiple ajax calls to fill the datatable?

bindrid

if you actually need to make multiple ajax calls to get the datatable data, you would probably better off pulling your ajax out of data table and get and merge the data prior to building the data.

This assumes that you do not have control over the server allowing you to merge the data in a single data call

allan

I'm not sure why @bindrid's answer was rejected as it is the correct answer. If you need to make multiple Ajax requests, do so using $.ajax and then use rows.add() to add them to the table.

Allan

boachorseman0309

    <script type="text/javascript">
        $(document).ready(function() {
             var arreglo=['https://swapi.co/api/people/', 'https://swapi.co/api/people /?page=2'];
            $.ajax({
                     url: 'https://swapi.co/api/people/',
                     dataType: 'json',
                     success: function(json){
       }
     });
     $('#example').DataTable( {
         ajax: {
    url: "https://swapi.co/api/people/",
    dataSrc: 'results'
    },
       columns: [
    { data: 'name' },
    { data: 'height' },
    { data: 'hair_color' },
    { data: 'skin_color' },
    { data: 'gender' }

                 ]
          } );
        });
       </script>

Yeah that would do the job but the thing is that i dont know what to do here, i am now trying to make the Ajax call from outside, so in the "success: function(json){}" i should make it something like this?

       $.ajax({
                     url: 'https://swapi.co/api/people/',
                     dataType: 'json',
                     success: function(json){
                          $('#example').DataTable( {

           columns: [
        { data: 'name' },
        { data: 'height' },
        { data: 'hair_color' },
        { data: 'skin_color' },
        { data: 'gender' }

                 ]
          } );

       }
       });

But i dont know what to write inside the datatables initialization because earlier i put ajax:url and the dataSrc but now i dont know how to make it work from there.

kthorngren

As Allan mentioned you will need to use rows.add(). I put together a quick example:
http://live.datatables.net/midaqate/1/edit

It initializes a blank Datatable. Then AJAX is used to collect the data and use rows.add() to add the data to the table. In this case the data is returned in a data object so you will see it adding json.data. Likely you will just need to use table.rows.add(json). Finally it uses draw() to display the updated table.

Kevin

boachorseman0309

Huge thanks to all of u guys, i'm going to try that.

prioseco

Hello, you need to use a function like this:

    $(document).ready(function () {
                $(document).ready(function () {
                    var table = $('#mi_tabla').DataTable({
                        "columns": [
                            { "data": "name" },
                            { "data": "height" },
                            { "data": "hair_color" },
                            { "data": "skin_color" },
                            { "data": "gender" }
                        ]
                    });
                    for (var index = 1; index < 10; index++) {
                        $.ajax({
                            url: 'https://swapi.co/api/people/?page=' + index,
                            dataType: 'json',
                            success: function (json) {
                                table.rows.add(json.results).draw();
                            }
                        });
                    } 
                });
            });

I used Kevin's function, but adapted for this case.