how i get a property inside of property of a JSON?

Question

I GET THIS JSON (BELOW)

[
  {
    id: 'dp690',
    name: 'Cubone',
    nationalPokedexNumber: 104,
    resistances: [{ type: 'Lightning', value: '-20' }]
  },
  {
    id: 'ex421',
    name: 'Bulbausaur',
    nationalPokedexNumber: 129,
    resistances: [{ type: 'Water', value: '+10' }]
  },
  {
    id: 'ml595',
    name: 'Pikachu',
    nationalPokedexNumber: 010,
    resistances: [{ type: 'Rock', value: '+1' }]
  },
]

AND I MADE THIS JS FUNCTION(BELLOW)

const draw = data => {
  const container = document.createElement('div');
  const f = document.createDocumentFragment();
  data.forEach(pokemon => {
    const contenedor = document.createElement('div');
    const pokedex = document.createElement('h1');
    const nombre = document.createElement('h2');
    const resistencias = document.createElement('h3');

    pokedex.textContent = pokemon.nationalPokedexNumber;
    nombre.textContent = pokemon.name;
    resistencias.textContent = pokemon.resistances.type;

    contenedor.appendChild(pokedex);
    contenedor.appendChild(nombre);
    contenedor.appendChild(resistencias);

    f.appendChild(contenedor);
  });
  d.appendChild(f);
};

USING FETCH I MADE THIS

fetch(url)
  .then(response => {
    console.log(response);
    return response.json();
  })
  .then(response => {
    console.log(typeof response.cards);
    return draw(response.cards);
  });

AND FINALLY I MADE THIS

button.addEventListener('click',()=> loadpokemons())

BUT I GOT THIS ANSWER

main.js: Uncaught (in promise) TypeError: Cannot read property 'type' of undefined
    at main.js:
    at Array.forEach (<anonymous>)
    at draw (main.js:)
    at main.js:
(anonymous) @ main.js:
draw @ main.js:
(anonymous) @ main.js:
Promise.then (async)
cargarpokemons @ main.js:
(anonymous) @ main.js:

MY QUESTION IS: HOW I GET THAT PROPERTY OF 'pokemon.resistances.type' ?? WITHOUT THIS LINE 'resistencias.textContent= pokemon.resistances.type' IT WORKS PLEASE HELP!

Answer 1

You are getting this error because pokemon.resistances.type is not found. As pokemon.resistances is an array so you should do this like:

const draw = (data)=>{
    const container = document.createElement('div')
    const f = document.createDocumentFragment()
    data.forEach(pokemon =>{

        const contenedor = document.createElement('div')
        const pokedex = document.createElement('h1')
        const nombre = document.createElement('h2')
        const resistencias = document.createElement('h3')

        pokedex.textContent=pokemon.nationalPokedexNumber
        nombre.textContent=pokemon.name
        if (pokemon.resistencies) {
          resistencies.textContent = pokemon.resistencies[0].type
        }

        contenedor.appendChild(pokedex)
        contenedor.appendChild(nombre)
        contenedor.appendChild(resistencias)

        f.appendChild(contenedor)
    })
    d.appendChild(f)
}

And also there is a typo in your fetch call on second .then as you have not defined a function. You fetch call should look like this:

fetch(url)
   .then(response => { console.log(response); return response.json()})
   .then(response => {console.log(typeof(response.cards)); return 
      draw(response.cards)})
   }