0
116
VistasMuestre imágenes en el navegador con el método de mapa usando URL provenientes de una API
Estoy tratando de mostrar dos imágenes en el navegador según las URL que obtuve de una API. Asi que,
- he cogido los datos
- ejecute un método de mapa que se ejecutará en toda la matriz que obtuve, y cada vez que se ejecuta en una imagen, la inserta en un div vacío usando innerHTML.
y esto es lo que obtuve:
HTML:
<body> <button id="new-deck">New Deck, Please!</button> <button id="draw-cards">Draw</button> <script src="index.js"></script> <div id="container-card"></div> </body>JS:
let deckId let container = document.getElementById('container-card') function handleClick() { fetch("https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1") .then(res => res.json()) .then(data => { console.log(data) deckId = data.deck_id }) } document.getElementById("new-deck").addEventListener("click", handleClick) document.getElementById("draw-cards").addEventListener("click", () => { fetch(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=2`) .then(res => res.json()) .then(data => data.cards.map(item =>container.innerHTML += `<img src=${item.image}/>`)) })
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Hay dos problemas:
- no está enviando
deckIddurante la llamada API de obtención de imágenes. - La
srcdel origen de la imagen debe estar entre comillas; de lo contrario, se agrega una barra invertida al final de la URL:
let deckId let container = document.getElementById('container-card') function handleClick() { fetch("https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1") .then(res => res.json()) .then(data => { console.log(data) deckId = data.deck_id }) } document.getElementById("new-deck").addEventListener("click", handleClick) document.getElementById("draw-cards").addEventListener("click", () => { fetch(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=2`) .then(res => res.json()) .then(data => data.cards.map(item =>container.innerHTML += `<img src="${item.image}"/>`)) }) <button id="new-deck">New Deck, Please!</button> <button id="draw-cards">Draw</button> <script src="index.js"></script> <div id="container-card"></div> Cada vez que trate con llamadas API, asegúrese de verificar qué datos recibe antes de simplificar su código con frases ingeniosas. y use catch para promesas para detectar cualquier error que pueda ocurrir.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta