How to show the created array with objects in the dataTable ?

AlphaX

Hello ,
i have a problem to show an array with objects which i created before in my datatable.

i use this js code

function loadDataTable1(datas, walletAddress) {
    console.log("THEDATA", datas);
    $("#datatrades").DataTable({
        destroy: true,
        ordering: false,
        searching: false,
        responsive: true,
        pageLength: 5,
        lengthMenu: [ 5, 10, 25, 50, 75, 100 ],
        language: {
            lengthMenu: '_MENU_ &nbsp&nbspItems / Page',
        },
        data: datas,
        columns: [
            { data: 'foreignBlockchain' },
            { data: 'qortAmount' },
            { data: 'mode' },
            { data: 'creationTimestamp' }
        ],
    });
}

my data in console log is like this

[
    {
        "qortalCreator": "QZm6GbBJuLJnTbftJAaJtw2ZJqXiDTu2pD",
        "creationTimestamp": 1668707505965,
        "qortAmount": "2.00000000",
        "expectedForeignAmount": "0.01578000",
        "mode": "REDEEMED",
        "qortalPartnerReceivingAddress": "QiTygNmENd8bjyiaK1WwgeX9EF1H8Kapfq",
        "foreignBlockchain": "LITECOIN"
    },
    {
        "qortalCreator": "QZm6GbBJuLJnTbftJAaJtw2ZJqXiDTu2pD",
        "creationTimestamp": 1668942385405,
        "qortAmount": "2.00000000",
        "expectedForeignAmount": "0.01578000",
        "mode": "REDEEMED",
        "qortalPartnerReceivingAddress": "QiTygNmENd8bjyiaK1WwgeX9EF1H8Kapfq",
        "foreignBlockchain": "LITECOIN"
    },
    {
        "qortalCreator": "QZm6GbBJuLJnTbftJAaJtw2ZJqXiDTu2pD",
        "creationTimestamp": 1668889730556,
        "qortAmount": "2.00000000",
        "expectedForeignAmount": "0.01578000",
        "mode": "REDEEMED",
        "qortalPartnerReceivingAddress": "QiTygNmENd8bjyiaK1WwgeX9EF1H8Kapfq",
        "foreignBlockchain": "LITECOIN"
    },
    {
        "qortalCreator": "QZm6GbBJuLJnTbftJAaJtw2ZJqXiDTu2pD",
        "creationTimestamp": 1668422473193,
        "qortAmount": "2.00000000",
        "expectedForeignAmount": "0.01578000",
        "mode": "REDEEMED",
        "qortalPartnerReceivingAddress": "QiTygNmENd8bjyiaK1WwgeX9EF1H8Kapfq",
        "foreignBlockchain": "LITECOIN"
    }
]

but it just say No data available in table.

I am thankful for any help.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Seems to work just fine here: http://live.datatables.net/zoyoqubi/1/edit (note you might need to use Firefox at the moment to access that page - it isn't accessible through https yet).

Please link to a test case showing the issue.

Allan

AlphaX

Hello !
Thanks for the answer my problem is here
https://qortex.live/wallet.html#qortal/stats?address=QYi9HovnP5USccMPuqsur3PSvt6uRUbdwy

When you click on the trades tab it dont show it

What i make wrong there ?

tangerine

Check your console error messages.
For example: {"error":1401,"message":"Couldn't find PUT transaction for name wang, service THUMBNAIL and identifier qortal_avatar"}

AlphaX

Yeah this is normal error for the avatar from the api, even with no error it wouldn't show.

sample link

https://qortex.live/wallet.html#qortal/stats?address=QgUehK1193u5kGU76cZHP9zky5zHYDTZPw

Is it maybe that i create the array before ?

async function loadAddressTrades(walletAddress) {
    let obj = [];
    await $.ajax(API + "transactions/search?address=" + walletAddress + "&limit=0&confirmationStatus=BOTH&txType=AT&reverse=true").done(function(data) {
        tradesLength = data.length;
        $.each(data, function(index, value) {
            const myAtAddress = value.atAddress;
            $.ajax(API + "crosschain/trade/" + myAtAddress).done(function(data2) {
                const newTrade = {
                    qortalCreator: data2.qortalCreator,
                    creationTimestamp: data2.creationTimestamp,
                    qortAmount: data2.qortAmount,
                    expectedForeignAmount: data2.expectedForeignAmount,
                    mode: data2.mode,
                    qortalPartnerReceivingAddress: data2.qortalPartnerReceivingAddress,
                    foreignBlockchain: data2.foreignBlockchain
                }
                obj.push(newTrade);
            });
        });
        $("#tradesCount").html(tradesLength);
    });
      loadDataTable1(obj, walletAddress);
}

kthorngren

The problem is not related to Datatables. Line 22 executes before all your ajax requests are complete so it calls loadDataTable1 with and empty obj array. You might need to move this statement between lines 20 and 21.

Kevin

AlphaX

HMM the obj is not empty as i can see all rows in in console log.

Which i call after loadDataTable1, here

function loadDataTable1(datas, walletAddress) {
    console.log("THEDATA", datas);
    $("#datatrades").DataTable({
        destroy: true,

kthorngren

Place a debugger breakpoint on lines 8 and 22. Reload the page. The browser will stop on line 22 first which calls the loadDataTable1 function. Click continue then the browser will stop on line 8, once for each row to populate the obj array. Ajax is asynchronous to keep the Javascript code running while waiting for the ajax response. Anything you want to happen after the response needs to be placed so its executed once the response is complete in the done function.

See the jQuery Ajax() docs for details.

Kevin

AlphaX

I moved it to line 20 and same result.

kthorngren

Actually you are right. You have a nested ajax call within a loop. The nested ajax calls are still running after the done function of the first ajax call is executed. You will need to restructure the code. One option might be to init the Datatable with an empty data set before fetching the data then use row.add() to populate the table. Something like this:

async function loadAddressTrades(walletAddress) {
    let obj = [];
    loadDataTable1(obj, walletAddress);
    var table = $("#datatrades").DataTable();
    await $.ajax(API + "transactions/search?address=" + walletAddress + "&limit=0&confirmationStatus=BOTH&txType=AT&reverse=true").done(function(data) {
        tradesLength = data.length;
        $.each(data, function(index, value) {
            const myAtAddress = value.atAddress;
            $.ajax(API + "crosschain/trade/" + myAtAddress).done(function(data2) {
                const newTrade = {
                    qortalCreator: data2.qortalCreator,
                    creationTimestamp: data2.creationTimestamp,
                    qortAmount: data2.qortAmount,
                    expectedForeignAmount: data2.expectedForeignAmount,
                    mode: data2.mode,
                    qortalPartnerReceivingAddress: data2.qortalPartnerReceivingAddress,
                    foreignBlockchain: data2.foreignBlockchain
                }
                //obj.push(newTrade);
                table.row.add( newTrade ).draw();
            });
        });
        $("#tradesCount").html(tradesLength);
    });
}

Kevin

AlphaX

Thanks so much @kthorngren !

This shows now my table. ( Need learn a little more data tables )

Olaf