-1

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

A Rezika
  • 19
  • 3
  • 2
    What about `console.log(JSON.stringify(response));` ? – 001 Jul 19 '22 at 20:46
  • Thanks know all appear but as a JSON string as stringify() method converts a JavaScript object or value to a JSON string, But still why I can't display all levels of the JavaScript object when I print the response directly through console.log(response)? – A Rezika Jul 20 '22 at 05:40
  • Thanks. After printing all as JSON string which is not that readable. Your reply helped me to do a second round of search and I found this printing is perfect using console.log(JSON.stringify(response,null,4)); it prints it like a JSON object. I found it on that answer https://stackoverflow.com/questions/47279994/nested-json-object-not-showing-up-when-printing-it – A Rezika Jul 20 '22 at 05:47

1 Answers1

0

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

A Rezika
  • 19
  • 3