如何遍历对象数组并在下拉列表中显示

Question

我是Javascript的新手，如果能得到任何帮助，我将不胜感激。我目前正在做一个项目，试图循环选择下拉菜单来显示我的阵列上的镜头，但遇到错误，我被卡住了。

页面加载的HTML内容很好，但选择选项，显示镜头，以便用户可以从中选择一直是我的问题。下拉列表来自一系列相机镜头，如下所示：

lenses: Array(2)
 0: "35mm 1.4"
 1: "50mm 1.6"

以下是Javascript代码和innerHTML：

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.');
});   

如果我能得到任何帮助，我将不胜感激，谢谢

Answer 1

首先，在构建lenses字符串时需要使用cameraSelect。

然后，您需要将填充的lenses变量放在innerHTML变量中，以便选择选项。

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.');
  });