Pokemon API fetch (axios) data then render all the data issue

Question

I'm fairly new to front end and back end dev. Trying to build a small web with React / Node.js, trying to fetch data from Pokemon API: https://pokeapi.co/

I'm trying to fetch (using axios) all pokemons' ID, Name, Types, Pics then render it. I got all the data back, but when rendering it, it can only render the first data. With error message

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:371:5)
    at ServerResponse.setHeader (node:_http_outgoing:576:11)
    .....

code:

router.get('/', async function (req, res, next) {
  const pokemonUrl = 'https://pokeapi.co/api/v2/pokemon?limit=10';
  var pokemonPic = [];
  var pokemons = [];
  // a nest fetch (aixos) data
  await axios({
    method: 'get',
    url: pokemonUrl,
    timeout: 10000
  })
    .then((all) => {
      // store data and give access for all
      let { data } = all;
      // fetch pokemon infomation from each url
      data.results.forEach(function (pokemon) {
        // the second url to fecth data
        const urll = pokemon.url;
        axios({
          method: 'get',
          url: urll,
          timeout: 10000
        })
          .then((respon) => {
            // otherwise have no access to respon
            let { data } = respon;
            var pokeTypes = [];
            let pokeName = data.name;
            let pokeID = data.id;
            let pokePic = data.sprites.front_default;
            // pokemon types
            for (var i = 0; i < data.types.length; i++) {
              pokeTypes += data.types[i].type.name + ' '
            }
            // check the outcome
            console.log(pokeID, pokeName, pokeTypes, pokePic);
            // render index from view

            res.render('index', {
              pokePic,
              name: pokeName,
              pokeTypes: pokeTypes,
              pokeID
            })
            // return pokeID, pokeName, pokeTypes, pokePic;
          })
          .catch((error) => {
            console.log(error);
          })
      })
    })

Any hint will be helpful. Warm thanks.

Answer 1

You can access the image of a pokemon by using :

        const getPokemon = async (pokemonName) => {
          await axios.get(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`).then(response => {
return response.data.sprites.front_default
}).catch(err => console.log(err))
    }
getPokemon('pikachu')

You should get this :