Filling a Datatable with a JSON from an API

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