Loading data from JSON structure

Murdock

Hi,

I'm trying to make a table showing all items in an inventory found in data["items"] inside my JSON data.
Only the iconPath, name, sprite, quantity and price of the items should be shown in the table.
How can I achieve this with the following JSON data:

{
    "data": {
        "id": 1,
        "username": "Murdock",
        "hotel": "com",
        "items": [
            {
                "baseItem": {
                    "id": 1,
                    "name": "Throne",
                    "sprite": "throne",
                    "iconFile": "no-icon.png",
                    "iconPath": "\/inventory\/img\/furniture\/no-icon.png"
                },
                "quantity": 9,
                "price": 8000
            },
            {
                "baseItem": {
                    "id": 5,
                    "name": "Fridge",
                    "sprite": "fridge",
                    "iconFile": "no-icon.png",
                    "iconPath": "\/inventory\/img\/furniture\/no-icon.png"
                },
                "quantity": 1,
                "price": 500
            }
        ]
    }
}

The table looks as following, the last 3 fields are being rendered within the columnDefs

<table id="inventoryTable">
    <thead>
    <tr>
        <th>Icon</th>
        <th>Item</th>
        <th>Sprite</th>
        <th>Quantity</th>
        <th>Price/c</th>
        <th>Price/Gb</th>
        <th>Total/c</th>
        <th>Total/Gb</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

I have tried the following two things with no luck, the datatable remains empty and does not produce any errors;

1 Creating a new array within dataSrc that matches the expected json structure for datatables to read:

    "ajax": {
        "url": BaseDir + "api/inventory/view/",
        "type": "GET",
        "data":
        {
            "username": "Murdock",
            "hotel": "nl",
            "wrap": "data"
        },
        "dataSrc": function(json)
        {
            // Only return items of inventory
            var items = {"data": []};

            for(var i = 0, ien=json["data"]["items"].length; i < ien; i++)
            {
                items["data"][i] = [
                    json["data"]["items"][i]["baseItem"]["iconPath"],
                    json["data"]["items"][i]["baseItem"]["name"],
                    json["data"]["items"][i]["baseItem"]["sprite"],
                    json["data"]["items"][i]["quantity"],
                    json["data"]["items"][i]["price"]
                ];
            }

            return items;
        }
    }

2 Only reading the 'items' array and telling datatables what to read for each column

    "ajax": {
        "url": BaseDir + "api/inventory/view/",
        "type": "GET",
        "data":
        {
            "username": "Murdock",
            "hotel": "nl",
            "wrap": "data"
        },
        "dataSrc": function(json)
        {
            // Only return items of inventory
            return json["data"];
        },
        "columns": [
            { "items": "baseItem.iconPath" },
            { "items": "baseItem.name" },
            { "items": "baseItem.sprite" },
            { "items": "quantity" },
            { "items": "price" }
        ]
    }

Any help is appreciated

allan

I would suggest simply settings ajax.dataSrc to be data.items. Then you can use data: 'price' etc in the columns array (note that there is no item option for the columns as you have above - see the columns.data reference documentation).

Allan

Murdock

That worked like a charm, thank you!