Data Table is showing 20 rows and no data in them?

ShahiDev

I am getting data from News Feed rest api and its json format is

{  
   "status":"ok",
   "totalResults":19306,
   "articles":[  
      {  
         "source":{  
            "id":"bbc-news",
            "name":"BBC News"
         },
         "author":null,
         "title":"John Motson: When Motty commentated with Muhammad Ali",
         "description":"Commentator John Motson remembers the time he briefly commentated with Muhammad Ali - before the boxer took off his shirt and went into the ring.",
         "url":"https://www.bbc.co.uk/sport/boxing/44163655",
         "urlToImage":"https://ichef.bbci.co.uk/onesport/cps/624/cpsprodpb/556F/production/_101617812_p067gxgs.jpg",
         "publishedAt":"2018-05-18T06:09:15Z"
      },
      {  
         "source":{  
            "id":"bbc-news",
            "name":"BBC News"
         },
         "author":null,
         "title":"Scottish Gossip: Celtic, Motherwell, Scottish Cup, Hibs, Rangers, Aberdeen",
         "description":"Hibs weighing up move for Rangers midfielder, Celtic boss expects star defender to remain next season...",
         "url":"https://www.bbc.co.uk/sport/football/44165545",
         "urlToImage":"https://ichef.bbci.co.uk/onesport/cps/624/cpsprodpb/118CD/production/_97758817_football_gossip_16x9.png",
         "publishedAt":"2018-05-18T06:03:39Z"
      }]}

----------->>>>>and my JS code is:-

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "ajax": "https://newsapi.org/v2/everything?sources=bbc-news&apiKey=fa813f30458b444884e0ef5ab06ead05",
       
 "sAjaxDataProp":"", 
        "sAjaxDataProp":"articles", 
         //fix the problem of uncaught length error
     
        "columns": [
          
            { "data": "articles[2].title" },
            { "data": "articles[3].description" },
            { "data":"articles[4].url" },
            {"data":"articles[5].urlToImage"}
        ]
    } );
} );

**and also the Html code is **:--

 <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                  <th>Title</th>
                <th>Description</th>
                <th>URL</th>
                <th>Image</th>
               </tr>
        </thead>
        <tfoot>
            <tr>
                   <th>Title</th>
                <th>Description</th>
                 <th>URL</th>
                <th>Image</th>
             </tr>
        </tfoot>
    </table>

Now kindly tell me why i am not getting data in rows, what i am doing wrong!!

colin

Hi @ShahiDev ,

Take a look at this example here, it shows how to set the ajax.dataSrc when it isn't data. You're using sAjaxDataProp at the top-level of the initialisation, but that isn't a supported option.

Cheers,

Colin