Нужно получить див с именем и изображением по api

Нужно получить див с изображением и именем по определённому id

let characterWrap = document.querySelector('#characters-wrap')

const url = 'https://rickandmortyapi.com/api/character/'
async function getCards(url) {
   try {
      const response = await fetch(url);
      return await response.json();

   } catch (e) {
      console.error(`Something is bad ---> ${e}`);
   }
}

getCards(url)
   .then(({ results }) => {
      results

         .map(({ id, name, status, image }) => {
            const indetifier = Promise

            results.forEach(({ id }) => {
               const uCardOfCharthers = document.createElement('div')

               image = document.createElement('img')
               image.src = results
               uCardOfCharthers.appendChild(image)

               characterWrap.appendChild(uCardOfCharthers)
               uCardOfCharthers.innerHTML =
                  `<img src='${image}' </img>
                  
                   ${name}
                  
                   ${status}`
            })
            const uCardOfCharthers = document.createElement('div')
            characterWrap.appendChild(uCardOfCharthers)
            uCardOfCharthers.innerHTML =
               `${image}
            
             ${name}
            
             ${status}`
         })
   })
`


Ответы (1 шт):

Автор решения: Evgenii

Мне кажется, что вы случайно написали лишние интерации и действия, там где они не нужны. Перебирается массив с результатами и потом еще раз внутри этого перебора перебираются результаты уже деструктурируя только id. Как минимум это не есть хорошо. + вы переопределяете url картинки вот этой строкой image = document.createElement('img')

let characterWrap = document.querySelector('#characters-wrap')

const url = 'https://rickandmortyapi.com/api/character/'
async function getCards(url) {
   try {
      const response = await fetch(url);
      return await response.json();

   } catch (e) {
      console.error(`Something is bad ---> ${e}`);
   }
}

getCards(url)
   .then(({ results }) => {
      results
         .map(({ id, name, status, image }) => {
               const uCardOfCharthers = document.createElement('div')
               characterWrap.appendChild(uCardOfCharthers)

               uCardOfCharthers.innerHTML =
                   `<img src='${image}' </img>
                    ${name}
                    ${status}`
         })
   })
<div id="characters-wrap" />

→ Ссылка