How to access JSON data within nested objects? Tried using render function to display unsuccessfully

newbieC

Link to test case: https://live.datatables.net/bibimoci/2/edit?html,js,console,output
Debugger code (debug.datatables.net): abemeq
Error messages shown: Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at render (tablescript.js:337:38)
at datatables.min.js:30:12136
at e.fnGetData (datatables.min.js:30:15468)
at S (datatables.min.js:30:18001)
at lt (datatables.min.js:30:16831)
at ie (datatables.min.js:30:42387)
at u (datatables.min.js:30:23702)
at datatables.min.js:30:33130
at Object.e [as success] (datatables.min.js:30:25829)
Description of problem:

Trying to display json data from an open API (https://restcountries.com/v3.1/all). I am stuck at accessing nested objects properties (currencies and languages). I tried accesing data in a testfile outside of datatable and was able to figure out how to access it using "object.keys" and "object.values" methods. But when trying to do same in datatable, data is not shown or error message "cannot access null or undefined data object". I tried using many variations like Object,keys(data) or Object,keys(data.currencies) or Object,keys('currencies') but only null or error message is shown. Any help is appreciated.

For reference this is the code I used outside of datatable to access the objects properties:
console.log(Object.values(element.currencies)[0].name + ' ' + Object.values(element.currencies)[0].symbol)
console.log(Object.keys(element.currencies)[0])
// for languages
console.log(Object.values(element.languages)[0])

allan

Thanks for the test case, it is very useful.

If a property doesn't exist in the JSON, and DataTables is looking for it, then you need to specify columns.defaultContent for that column so DataTables knows what to show in its place.

For example Antarctica in the JSON feed doesn't have a currency object. Adding columns.defaultContent as an empty string addresses that. A number of other rows also have properties which appear to be optional. I've updated your test case to allow for this.

Allan

newbieC

Hey, thank you for that, it fixed errors on empty data cells I was getting but how do I access the "3" column which is supposedly currencies of each country. It only show "object object" being a nested object I have failed to access its properties name or symbol.

Object.keys and values show up in console log but throws null or undefined error when I try to use the code to return the same data in datatables as mentioned above.

Could you help me figure out how to return data or why is js function object.keys not working when trying to return data in render function?

{
  defaultContent: '<b>No Data To Display</b>',
  data: 'currencies',
  render:function(data,type,row){
               if(type === 'display'){
                  // console.log(data)
                  return Object.keys(data)[0]
               else{
                  console.log(Object.keys(data)[0])
                  return Object.keys(data)[0]
               }
            }
}

newbieC

Also, my header on this table is not scrolling horizontally along with my data fields which is weird as I have made no changes to code or BS5 table styling in any parent or child tags, its same as my other tables and they work fine when horizontally scrolling.

allan

Yes, Object.keys() will throw an error if you don't pass an object in. In this case you are passing undefined. Just check if there is a value or not first: https://live.datatables.net/bibimoci/4/edit .

Also, my header on this table is not scrolling horizontally along with my data fields

Add scrollX: true. I've done that in the linked example above.

Allan

newbieC

OH, yes. smacks head...I did not realise their were undefined objects in the json data and had to handle them as well.

{
            data: 'currencies',
            render:function(data,type,row){
                  // console.log(Object.keys(data)[0])
                  if(data !== undefined)
                     return Object.values(data)[0].symbol + ' , ' + Object.keys(data)[0] + ' , ' + Object.values(data)[0].name
                  else 
                     return '<b>NO DATA TO DISPLAY<b>'
            
            }
           
        }

THIS IS WORKING FINE NOW, thanks for your help. I appreciate it!!!