Question posted in
You can find the official documentation here.

DataTables Jquery Ajax Object not finding array columns

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>
Tags:

2

Answers


  1. 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" },

    ]
} );

    } );

    Login or Signup to reply.
  2. 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" }]
    });
})();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search