Creé un bucle forEach que recopila las URL de 10 gifs y quiero agregarlos a uno que tengo actualmente en mi html en la línea 33. Tengo que mostrar los gifs en la página. Actualmente estoy recibiendo una lista de las direcciones URL. ¿Hay alguna manera de tener una lista de imágenes en la página manteniendo la mayor parte del código que tengo actualmente? Desde la línea 55 hacia abajo está mi bucle forEach en el que intento agregar un niño.
const button = document.querySelector("#search-btn"); button.addEventListener("click", (event) => { event.preventDefault(); const giffTitle = document.querySelector("#giffTitle").value; axios; const giffSection = document.querySelector(".giffs"); const giffList = document.querySelector(".list"); axios .get( `https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en` ) .then((res) => { const giff = res.data; // const giffUrl = giff.data[0].embed_url; const giffUrl = giff.data; console.log(giffUrl); giffUrl.forEach(function(singleGiff) { let img = document.createElement("li"); img.textContent = singleGiff.embed_url; giffList.appendChild(img); console.log(singleGiff.embed_url); }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <h1>Giffs</h1> <form action=""> <label for="">Search</label> <input type="text" id="giffTitle" /> <button id="search-btn">Search</button> </form> <iframe id="iframe" src="${giffUrl}" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen></iframe> <section class="giffs"></section> <ul class="list"></ul>He editado para terminar en:
giffUrl.forEach(function (singleGiff) { let img = document.createElement("img"); img.src = singleGiff.embed_url; let list = document.createElement("li"); list.appendChild(img); giffList.appendChild(list); console.log(singleGiff.embed_url); });y la salida es una lista de imágenes rotas.
Algo como esto debería funcionar:
giffUrl.forEach(function (singleGiff) { let img = document.createElement("img"); img.src = singleGiff.embed_url; let listElement = document.createElement("li"); listElement.appendChild(img); giffList.appendChild(listElement); console.log(singleGiff.embed_url); });Puede agregar fácilmente una imagen con la ayuda de los literales de plantilla y el método HTML DOM insertAdjacentHTML() . Espero que el siguiente fragmento te ayude mucho.
Link de referencia:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literalshttps://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp
const button = document.querySelector("#search-btn"); button.addEventListener("click", (event) => { event.preventDefault(); const giffTitle = document.querySelector("#giffTitle").value; axios; const giffSection = document.querySelector(".giffs"); const giffList = document.querySelector(".list"); axios.get( `https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en` ) .then((res) => { const giff = res.data; // const giffUrl = giff.data[0].embed_url; const giffUrl = giff.data; // console.log(giffUrl); giffList.innerHTML = ''; // empty <ul> before listing giffUrl.forEach(function (singleGiff) { console.log(singleGiff) giffList.insertAdjacentHTML('beforeend', ` <li> <img src="${singleGiff.images.downsized.url}"> </li> `) }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <h1>Giffs</h1> <form action=""> <label for="">Search</label> <input type="text" id="giffTitle" /> <button id="search-btn">Search</button> </form> <section class="giffs"></section> <ul class="list"></ul>Necesita un nuevo elemento li e img . Y si desea presentar el GIF en sí, debe establecer el atributo src de la imagen en singleGiff.images.downsized.url .
const button = document.querySelector("#search-btn"); button.addEventListener("click", (event) => { event.preventDefault(); const giffTitle = document.querySelector("#giffTitle").value; axios; const giffSection = document.querySelector(".giffs"); const giffList = document.querySelector(".list"); axios .get( `https://api.giphy.com/v1/gifs/search?api_key=iVwoS0brONsmkA6sWVqHgJ9D7g2WYDmv&q=${giffTitle}&limit=10&offset=0&rating=g&lang=en` ) .then((res) => { const giff = res.data; // const giffUrl = giff.data[0].embed_url; const giffUrl = giff.data; //console.log(giffUrl); giffUrl.forEach(function(singleGiff) { let li = document.createElement("li"); let img = document.createElement("img"); img.src = singleGiff.images.downsized.url; li.appendChild(img); giffList.appendChild(li); }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <h1>Giffs</h1> <form action=""> <label for="">Search</label> <input type="text" id="giffTitle" /> <button id="search-btn">Search</button> </form> <iframe id="iframe" src="${giffUrl}" width="480" height="270" frameborder="0" class="giphy-embed" allowfullscreen></iframe> <section class="giffs"></section> <ul class="list"></ul>