DataTables Jquery Ajax Object not finding array columns

Question

I'm trying to use jquery.dataTables with an Ajax data source to pull json data into a html table.

I'm facing an issue where it's not able to find the data I'm looking for in the JSON response and I'm struggling to find where my issue lies. I'm getting an undefined error as it's not able to match the data columns I requested.

In the Snipped-I removed the URL but here's a sample of the object structure returned.

{
    "success": true,
    "result": [
        {
            "type": "gift",
            "name": "Gift",
            "rewards": [
                {
                    "name": "Item Name",
                    "image_url": "https://xxx.jpg",
                    "minimum_display_price": "500+ bucks",
                    "description": {
                        "text": "text here",
                        "html": "html here"
                    },
                    "disclaimer_html": "disclaimer",
                    "warning": null,
                    "denominations": [
                        {
                            "id": "5ca1737f1sdasdsadsad2cb5f004cc0d564",
                            "name": "Name",
                            "price": 500,
                            "display_price": "500",
                            "available": true
                        }
                    ]
                }
            ]
        }
    ]
}

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "myurlishere",
        "columns": [ 
            { "result[0]": "name" }
            //{ "result": "rewards.name"}
            // {"data": "name"}
            
        ]
    } );
} );

<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js" type="text/javascript"></script>
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js" type="text/javascript"></script>


<table id="example" class="display" style="width:100%">

        <thead>
            <tr>
                <th>Name</th>
                
                
                
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                
                
            </tr>
        </tfoot>
    </table>

Dennis Kotsch · Accepted Answer · 2019-11-27 15:24:27Z

0

Looks like you have some nested data objects and while it might be possible to deal with this directly within DataTable it's likely easier to pre-process the data before handing it off to DataTable for rendering. This would convert your nested data into a flat array of reward objects, which should make rendering it easier.

(async function() {
    const rawData = await fetch("your_url").then(data => data.json());
    const finalData = rawData.result.map(category => category.rewards).flat(1);
    $("#example").DataTable({
        data: finalData,
        columns: [{ data: "name" }]
    });
})();

answered Nov 27, 2019 at 15:24

Dennis Kotsch

1843 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ranjith.V · Accepted Answer · 2019-11-27 10:23:02Z

0

Might be you need to change your code , just check following way,

$(document).ready(function() {
$('#example').DataTable( {
    "ajax": "myurlishere",
    "columns": [
        { "data": "name" },
        { "data": "rewards[, ].name" },
        { "data": "rewards[, ].image_url" },
        { "data": "rewards[, ].description.text" },
        { "data": "rewards[, ].denominations[,].name" },

    ]
} );

} );

answered Nov 27, 2019 at 10:23

Ranjith.V

3261 silver badge8 bronze badges

3 Comments

user6831343 Over a year ago

Thanks for the answer, I'm still getting an error: jquery.min.js:formatted:1532 Uncaught TypeError: Cannot read property 'length' of undefined I've tried using an Ajax URL and also objects.txt as a local file to ensure there's no issue with the url

Ranjith.V Over a year ago

That your error says conflicting the js files on application , check once your js file's order and is it loading correctly or not

user6831343 Over a year ago

Even if I strip the <head> down to just Jquery.js and jquery.datatables.js, it gives the same error

<script src="https://code.jquery.com/jquery-3.3.1.js"></script><script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script></head>

Collectives™ on Stack Overflow

DataTables Jquery Ajax Object not finding array columns

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related