Get DataTables to display a JSON output from a URL

muazzam

Hello All!

First of all I will apologies for being noob in JavaScript but for some reason I have been assigned a task which apparently looked so simple. There is an API URL which returns some data in JSON format and I have to display that on a webpage.

{
    "cellarViews": {
        "cellarView": [{
            "wine": "Alejandro Fernandez, Ribera Duero Crianza",
            "vintage": "2008",
            "caseSize": "12x75",
            "uid": 369055,
            "photos": null,
            "costPrice": 16.21,
            "marketPrice": 165.0,
            "percentageChange": 917.89,
            "lwin": "1120206",
            "passportstatus": "-",
            "validtill": null
        }, {
            "wine": "Alheit, Cartology Bushvines",
            "vintage": "2015",
            "caseSize": "6x75",
            "uid": 930134,
            "photos": null,
            "costPrice": 88.5,
            "marketPrice": 191.5,
            "percentageChange": 116.38,
            "lwin": "1312520",
            "passportstatus": "-",
            "validtill": null
        }]
    }
}

Above is the format of json file with records repeating in cellarView.

On first attempt I made using API url I found it http request to other domains is not allowed. So I stored the output in a data.json file on server and tried to access it from same url, it will show the table elements nicely but wont display data at all.

since I am working on localserver so attaching screenshot of the problems.

I have tried reading forums, search google for about 5 hours now and found nothing that could help me understand. And examples on DataTables make it look like a piece of cake.

code so far

...

var $j = jQuery.noConflict();

$j(document).ready(function() {
$j('#data').DataTable( {
// "processing": true,
ajax: {
url: '/wp-content/uploads/customer-data/data.json',
dataSrc: 'cellarView',
processing: true,
},
columns: [
{ "data": "wine" },
{ "data": "vintage" },
{ "data": "caseSize" },
{ "data": "uid" },
{ "data": "costPrice" },
{ "data": "marketPrice" },
{ "data": "lwin"}
]
} );
} );

...

Any help is highly appreciated

Regards

edited by Allan. Code formatting

tangerine

Your JSON is not in the format required by DataTables.
See the "Ajax" file here: https://datatables.net/examples/data_sources/ajax.html

muazzam

Thank you for the reply @tangerine

I do not get it, I thought there are two data types for JSON, object and array and both are supported in DataTables.
If any light can be shed on data format, It will be really helpful.

Thanks in advance

allan

Change dataSrc: 'cellarView', to be:

dataSrc: 'cellarViews.cellarView',

Currently the dataSrc property isn't finding anything since there is no cellarView at the top level.

Allan

muazzam

Thank you so much Allan,

I will give it a try, meanwhile i took a long route by displaying data in a table via function and then apply DataTables, seems to work with limitations tho.

Thank you all for your help.