Datatables issue displaying data from external data source

Viewed 27

First-time poster here with hopefully just a noob issue.

I can't get the data from an external source to display in a datatable. This is an example of the data.

{
    "@odata.context": "https://xxxxxxxxxxxxxx",
    "value": [
         {
               "No": "V738663",
               "SelltoCustomerNo": "WS370",
               "ExternalDocumentNo": "AUS LEE",
         },{
               "No": "V738664",
               "SelltoCustomerNo": "WS376",
               "ExternalDocumentNo": "TESTING",
         }
     ]
}

This is the javascript I'm using.

var tblTest = $('#tbl-test').DataTable({
    processing: false,
    serverside : false,
    ajax: {
        url: "https://api.xxxxxxxxxxxxxxx.com",
        type: "GET", 
        dataType: 'JSON',
        beforeSend: function(xhr){
            xhr.setRequestHeader("Authorization", "Basic " + btoa(un + ":" + pw));
         }
        
    },
    columns: [
        { "value": "No"},
        { "value": "SelltoCustomerNo"}, 
        { "value": "ExternalDocumentNo"},
    ],

    responsive: true,
    dom: "<'toprow'<'col-md-6'B> + <'col-md-6 pull-right'f>>t<'bottomrow'<'col-md-6'l> + <'col-md-6'p>>",
    buttons: ['excelHtml5'],
    paging:   true,
    bInfo:     false, 
    fixedHeader: true,
    pageLength: 10,
    lengthMenu: [ [10, 15, 20, -1], [10, 15, 20, "All"] ],
    bAutoWidth: false, 

    language: {
    emptyTable:     "There are no entries found"
    },
}); 

I am returning data OK as this code works to return one value.

$.ajax({
        url: "https://api.xxxxxxxxxxxxxxx.com",
        type: "GET",
        dataType: 'JSON',
        headers: {
            'Authorization': 'Basic ' + btoa(un + ':' + pw)
        },
        success: function (data) {
            alert("success " + data.value[0].No);
        },
        error: function (xhr, ajaxOptions, thrownError) { 
            alert("Error Code: " + xhr.status + "<BR>" + xhr.responseText);
        },
    });

I think the issue is the line "value": [ in the data, usually, this says "data": [, but I can't change this as it is from an external source.

Any ideas for resolving? Thanks in advance for any help.

Will.

EDIT: Thanks to @andrewjames, this is now my working code.

var tblTest = $('#tbl-test').DataTable({
    processing: false,
    serverside : false,
    ajax: {
        url: "https://api.xxxxxxx.com",
        type: "GET",
        dataType: 'JSON',
        dataSrc: "value",
        beforeSend: function(xhr){
            xhr.setRequestHeader("Authorization", "Basic " + btoa(un + ":" + pw));
         }
        //headers: {'Authorization': 'Basic ' + btoa(un + ':' + pw)},
    },
    columns: [
        { "data": "No"},
        { "data": "SelltoCustomerNo"},  
        { "data": "ExternalDocumentNo"},
    ],


    responsive: true,
    dom: "<'toprow'<'col-md-6'B> + <'col-md-6 pull-right'f>>t<'bottomrow'<'col-md-6'l> + <'col-md-6'p>>",
    buttons: ['excelHtml5'],
    paging:   true,
    //pagingType:   "simple",
    bInfo:     false, 
    fixedHeader: true,
    pageLength: 10,
    lengthMenu: [ [10, 15, 20, -1], [10, 15, 20, "All"] ],
    bAutoWidth: false, 

    language: {
    emptyTable:     "There are no entries found"
    },
}); 
0 Answers
Related