Adding JSON info to a Datatable by using rows.add

Question

The thing is that i have one Datatable working very well that adds all 87 Star Wars characters from swapi.co API, the info comes in a JSON structure like this:

  {
"count": 87, 
"next": "https://swapi.co/api/people/?page=2", 
"previous": null, 
"results": [
    {
        "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/"
    }

This works very well and i add it like this:

   var table = $('#example').DataTable( {
    "columns": [
        { "data": "name" },
        { "data": "height" },
        { "data": "hair_color" },
        { "data": "skin_color" },
        { "data": "gender" }
    ]
    } );

  $.ajax({
 url: 'https://swapi.co/api/people/',
 dataType: 'json',
 success: function(json){
   table.rows.add(json.results).draw();
  }
});

This works great but now i want to select one row (select one character from the datatable) and extract its url from the JSON, so i can fill another datatable with different info from the character JSON like this:

  $('#example tbody').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+data.url+'\'s row' );
     $.ajax({
 url: data.url,
 dataType: 'json',
 success: function(json){
   tableDos.rows.add(json.name).draw();

  }
  });

    } );

It all works very well except the line when it is going to add it to the datatable. This JSON comes like 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/"
 }

And the datatable comes like this:

   var tableDos = $('#exampleDos').DataTable( {
    "columns": [
        { "data": "name" },
             { "data": "gender" }


    ]
    } );

It doesnt work and Datatables show this error http://datatables.net/tn/4

I'm guessing that it's because you're asking for key/value pair that isn't in the returned JSON from the 2nd call? To check this simply add "defaultContent": "<i>Not set</i>" to your column objects - if that doesn't work came back and we'll look further but I should imagine that is it: datatables.net/reference/option/columns.defaultContent — annoyingmouse
– annoyingmouse, Commented Apr 6, 2018 at 10:47
The keys that i'm asking are in the JSON, i Will read what you linked and try ir out — bojackhorseman99
– bojackhorseman99, Commented Apr 7, 2018 at 0:17

annoyingmouse · Accepted Answer · 2018-04-08 11:05:48Z

1

You had an issue with you ajax as you were just adding the name here: tableDos.rows.add(json.name).draw();.

I had a couple of minutes spare so I took a longer look via JSFiddle and this seems to work:

$(document).ready(function() {
  var table = $('#example').DataTable({
    "columns": [{
        "title": "Name",
        "data": "name"
      },
      {
        "title": "Height",
        "data": "height"
      },
      {
        "title": "Hair Colour",
        "data": "hair_color"
      },
      {
        "title": "Skin Colour",
        "data": "skin_color"
      },
      {
        "title": "Gender",
        "data": "gender"
      }
    ]
  });
  var tableDos = $('#exampleDos').DataTable({
    "columns": [{
        "title": "Name",
        "data": "name"
      },
      {
        "title": "Gender",
        "data": "gender"
      }
    ]
  });
  $.ajax({
    url: 'https://swapi.co/api/people/',
    dataType: 'json',
    success: function(json) {
      table.rows.add(json.results).draw();
    }
  });
  $('#example tbody').on('click', 'tr', function() {
    var data = table.row(this).data();
    console.log(data);
    $.ajax({
      url: data.url,
      dataType: 'json',
      success: function(json) {
        tableDos.row.add(json).draw();
      }
    });
  });
});

You were adding a single object so this would work: tableDos.rows.add([json]).draw(); or, the method I used: tableDos.row.add(json).draw();.

Hope that helps.

answered Apr 8, 2018 at 11:05

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

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

1 Comment

bojackhorseman99 Over a year ago

Thats great, just tried with my document and it works perfectly and finally it was a so simple thing haha thanks dude,

user9008566 · Accepted Answer · 2018-04-06 15:40:42Z

1

https://datatables.net/forums/discussion/48819/help-filling-datatable-with-json-from-api

Kevin’s example didn’t work? http://live.datatables.net/midaqate/1/edit

If Kevin couldn’t figure it out - not sure what else to tell you.

For my server-side database, I used the regular sqli insert method. Found it more efficient.

answered Apr 6, 2018 at 15:40

user9008566

4 Comments

bojackhorseman99 Over a year ago

Yeah it helped a lot i Made the first table, but this is a very little different thing, meanwhile the first table is receiving and array of objects from the JSON API "/people/" that has the first 10 characters, but now my problem is that when someone clicks the row it is going to send the url from that person to make the Ajax request, exanple when i click Luke Skywalker it's going to be "/people/1" that returns the JSON but not like "/people/" JSON so it isnt working like my first table.

user9008566 Over a year ago

The columns in the Ajax can cause the error 4. Or maybe try to switch your json to object associate ray. “ You need to return a json object (associative array) in that case with the column names as keys - either that or lose the whole "columns": declaration in your table init. You are only supplying a plain array but datatables is looking for keys since you have specified a data attribute“: stackoverflow.com/questions/49683076/…

user9008566 Over a year ago

Ok. Just reread your comment maybe that won’t help actually (though could be a reason why you might be getting error #4). So sometimes you do not need the get_id from the url is what’s you are saying?

bojackhorseman99 Over a year ago

Sorry dude i'm on mobile and can't express myself very Wells haha. My actual problem is this, when someone clicks on the first table (The one with the 87 characters with id: "example") it's gonna prompt a method that does this: When someone clicks a row it it's going to extract the URL from the character selected and pass it to an AJAX call to fill the second table with the "movies, vehicles and starships" This method is in my post is the one with $.(#example tbody).... You can see it in my post. The problem is that it is making the call but it can't fill the second table.

Collectives™ on Stack Overflow

Adding JSON info to a Datatable by using rows.add

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related