Soy nuevo en Javascript y agradecería cualquier ayuda que pueda obtener. Actualmente estoy trabajando en un proyecto e intento recorrer el menú desplegable de selección para mostrar las lentes que tengo en mi matriz, pero encuentro errores y estoy atascado.
La página se carga bien con el contenido HTML, pero la opción de selección que muestra lentes para que los usuarios puedan elegir ha sido mi problema. El menú desplegable es de una variedad de lentes de cámara como esta: -
lenses: Array(2) 0: "35mm 1.4" 1: "50mm 1.6"Aquí está el código Javascript y el HTML interno: -
const urlParam = new URLSearchParams(window.location.search); let productId = urlParam.get("id"); let product = null; // FETCH API fetch("http://localhost:3000/api/cameras/" + productId) .then((response) => { return response.json(); }) .then((data) => { let lenses = ""; for (const cameraSelect of data.lenses) { lenses += `<option>${lenses}</option> `; //select camera lenses } //HTML container let innerHTML = ` <div class='col'> <div class="card"> <img src=${data.imageUrl} class="card-img-top"> <div class="card-body"></div> <h3 class="card-title" >${data.name}</h3> <p class="card-text">${data.price}€</p> <select id="lenses"> <option>${data.lenses}</option> </select> <h2>result</h2> </div> </div> `; document.getElementById("productList").insertAdjacentHTML('beforeend',innerHTML) ; console.log(data); }) .catch(function () { window.alert('oops something went wrong! Try again.'); });Agradecería cualquier ayuda que pueda obtener, gracias
En primer lugar, debe usar cameraSelect cuando esté construyendo la cadena de lenses .
Luego, debe colocar esa variable de lenses poblada en la variable innerHTML , para las opciones de selección.
const urlParam = new URLSearchParams(window.location.search); let productId = urlParam.get("id"); let product = null; // FETCH API fetch("http://localhost:3000/api/cameras/" + productId) .then((response) => { return response.json(); }) .then((data) => { let lenses = ""; for (const cameraSelect of data.lenses) { lenses += `<option>${cameraSelect}</option> `; //select camera lenses } //HTML container let innerHTML = ` <div class='col'> <div class="card"> <img src=${data.imageUrl} class="card-img-top"> <div class="card-body"></div> <h3 class="card-title" >${data.name}</h3> <p class="card-text">${data.price}€</p> <select id="lenses"> ${lenses} </select> <h2>result</h2> </div> </div> `; document.getElementById("productList").insertAdjacentHTML('beforeend', innerHTML); console.log(data); }) .catch(function() { window.alert('oops something went wrong! Try again.'); });