Datables Render Nested Objects & Arrays from Ajax Request

Question

I have this json from third party API, which isn't under my control-

https://pastebin.com/WNZZWXV7

(contains stripped down single set)

The 2 values I want in a row are like this-

Column 1 = response.listResults[0].listInstrument.instrumentBasic.symbol ("SAREGAMA" in the example)

Column 2 = response.listResults[0].listColumns[0].dataValue.doubleValue (823 in example)

This is my current code-

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

<script>    
$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": '..private url',
        
        "columns": [
            { "title": "Stock", "data": "response.listResults.listInstrument.flagged", "searchable": true, "visible": true },
            { "title": "Price", "data": "response.listResults.listColumns[0].dataValue.doubleValue" }
        ]
    } );
} );
</script>

I went through examples here - https://datatables.net/examples/ajax/ but not able to sort it out. Any help or pointers are appreciated.

andrewJames · Accepted Answer · 2021-01-16 17:48:48Z

1

That is a somewhat awkward JSON structure, because it has two separate arrays that you want to use as your iteration points for each DataTables column - and in the second column, you only want to take the first nested object...

Here is one approach:

Change your ajax option so it can use the dataSrc option:

"ajax": {
  "url": "..private url",
  "dataSrc": "response.listResults"
}

In this case, the dataSrc points to the location in your JSON response where the first JSON array starts: the listResults array.

Now you can use this as the starting point for each of your columns definitions:

"columns": [
  { 
    "title": "Stock", 
    "data": "listInstrument.instrumentBasic.symbol", 
    "searchable": true, 
    "visible": true 
  },
  { 
    "title": "Price",
    "data": "listColumns.0.dataValue.doubleValue"
  }
]

The first column's data definition will iterate over every listInstrument object. But since there is only one such object, it will only grab the one related value for the symbol name: "SAREGAMA".

The second column uses listColumns.0 to ensure it only looks at the first (of many) listColumns objects. That gives you the single price you want: 823. This obviously assumes you are OK hard-coding that zero, for the first object.

The end result:

answered Jan 16, 2021 at 17:48

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

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

1 Comment

Puneet Saini Over a year ago

Thanks, it worked for my json. I have accepted the answer.

Collectives™ on Stack Overflow

Datables Render Nested Objects & Arrays from Ajax Request

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related