Data not loading despite AJAX Success

lennyhadley

My code is as follows (API Key blocked out for obvious reasons). But on the Success part, I do get the "Get Data Success" to show up in my div, however the datatable data never loads. It just gets stuck saying "Loading".

I did put the json result into a validator and my json is also valid.

$(document).ready(function() {
var table = $('#PositionalRankings').DataTable({
        'ajax': {                 
            'beforeSend': function (request) {
                request.setRequestHeader("Authorization",
                    "Basic " + btoa('c0e3529b-xxxx-xxxx-xxxx' + ":" + 'MYSPORTSFEEDS'))
            },
            async: false,
            type: "GET",
            url: 'https://api.mysportsfeeds.com/v2.0/pull/nhl/2017-2018-regular/date/20180301/games.json',                                            
            dataSrc: "JSON",     
            dataType: "json",                                      
            success: function (data) {
                var div = document.getElementById('test');
                div.innerHTML += 'Get Data Success ';
            }                         
        },       
        "columns": [
                { "data": "lastUpdatedOn" }
        ],
        "order": [ 0,'asc' ]
    });  
});      

EDIT: updated to use Markdown code formatting.

lennyhadley

as a follow up, on the dataSrc in my example it says 'JSON', however I've also tried it blank. My json file doesn't have the DATA tag. Niether way works.

lennyhadley

This is what my Json looks like, for further information.

lennyhadley

Attached also is copy of json file for reference. Tried so many things with this,...just can't get it to load even the simple data, like the "lastUpdatedOn" at the top of the file. Ugh

kthorngren

I'm not familiar with that output but I suspect the problem is due to Datatables expects an array of data with the ajax call. It looks like your array of objects is in the games object. I'm guessing you actually want to display games so you would use ajax.dataSrc as games and setup your columns.data as needed.

This example will probably be of interest:
https://datatables.net/examples/ajax/deep.html

I believe the DT developer has mentioned, in other threads, that when using the ajax option you shouldn't use a success function as Datatables expects this to pass through to jQuery's ajax function. You can use the ajax.dataSrc as a function instead. The docs have an example.

Kevin

lennyhadley

@allan I need saving, no clue what I'm doing wrong here.

lennyhadley

Wow. I never knew the success function prevented it from loading. I took that out and changed data source to games and it immediately worked. Thanks. That was a massive life saver.

lennyhadley

One more question @kthorngren , attached is another json file. How would I access the highlighted line?

$(document).ready(function() {
    var table = $('table.AwayTeam').DataTable({
        'ajax': {                 
            beforeSend: function (request) {
                request.setRequestHeader("Authorization",
                    "Basic " + btoa('c0e3529b-d90f-4951-aacb-6502b7' + ":" + 'MYSPORTSFEEDS'))
            },
            async: false,
            contentType: "application/json; charset=utf-8",
            type: "GET",            
            url: 'https://api.mysportsfeeds.com/v2.0/pull/nhl/2017-2018-regular/games/20180314-DAL-TOR/lineup.json',
            dataType: "json",
            dataSrc: "teamLineups"                      
        },       
        'columns': [
            { data: 'expected.lineupPositions.position' },
            { data: 'expected.lineupPositions[].position' },
            { data: 'expected.lineupPositions[,].position' }
        ],        
    });     
});