Why console.log does not show all levels of JSON after parsing? - json

Question

I am practicing with simple APIs. I request data from OXFORD API. The data is received correctly and I can navigate through it and extract the definitions or etymologies I want. However when I print the complete response after the .json() the content of some arrays is shown as [Array]. Any Idea what I am missing?
My code looks like this:
let endpoint = "https://od-api.oxforddictionaries.com/api/v2/entries/en-gb/ace?fields=definitions&strictMatch=false";
const headers: {
'app_id': app_id,
'app_key': app_key
}
fetch(endpoint, {headers} )
.then(rawResponse=>rawResponse.json())
.then(response=>{
console.log(response);
console.log(response.results[0].lexicalEntries[0].entries[0].etymologies[0])
});
Result in the console looks like:
'''
{
id: 'ace',
metadata: {
operation: 'retrieve',
provider: 'Oxford University Press',
schema: 'RetrieveEntry'
},
results: [
{
id: 'ace',
language: 'en-gb',
lexicalEntries: [Array],
type: 'headword',
word: 'ace'
},
{
id: 'ace',
language: 'en-gb',
lexicalEntries: [Array],
type: 'headword',
word: 'ace'
}
],
word: 'ace'
}
Middle English (denoting the ‘one’ on dice): via Old French from Latin as ‘unity, a unit’
'''
I had tried with Apps Script, I got same result
'''
results:
[ { id: 'ace',
language: 'en-gb',
lexicalEntries: [Object],
type: 'headword',
word: 'ace' },
'''
Thanks in advance

Answer 1

The first comment here inspired my answer and further search. console.log() mainly prints string and when passing to it an array or an object, it interpret them as far as it can. So for the first level of [object, object] or {A:[],B:[]} it would print it without a problem.
When we go deeper to more nested arrays and objects within the JavaScript object parsed from an API response, it won't be able to interpret it properly and would return [object] or [Array]
e.g. The following can be printed by console.log easily
console.log([{A:1},{B:2},{C:3}])
and returns
[ { A: 1 }, { B: 2 }, { C: 3 } ]
Also,
console.log([{A:1},{B:2},{C:3,D:[1,2,3]}])
easily prints
[ { A: 1 }, { B: 2 }, { C: 3, D: [ 1, 2, 3 ] } ]
But,
console.log([{A:1},{B:2},{C:3,D:[{E:1},{F:2},{G:3}]}])
returns
[ { A: 1 },
{ B: 2 },
{ C: 3, D: [ [Object], [Object], [Object] ] } ]
So we need, to use JSON.stingify to convert it into a string
console.log(JSON.stringify([{A:1},{B:2},{C:3,D:[{E:1},{F:2},{G:3}]}]))
Successfully returns
[{"A":1},{"B":2},{"C":3,"D":[{"E":1},{"F":2},{"G":3}]}]
However, When the JSON object is bigger and deeper, you might need to prettify it using
console.log(JSON.stringify([{A:1},{B:2},{C:3,D:[{E:1},{F:2},{G:3}]}],null,2))
it returns
[
{
"A": 1
},
{
"B": 2
},
{
"C": 3,
"D": [
{
"E": 1
},
{
"F": 2
},
{
"G": 3
}
]
}
]
You can find a reference in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify