Skip to content
Advertisement

How can I loop through the array of objects and display on dropdown

I’m new to Javascript and I’d appreciate any help I can get. I’m currently working on a project and trying to loop over the select dropdown to display the lenses I have on my array but am encountering errors and i’m stuck.

The page loads fine with the HTML content but the select option which displays lenses so users can choose from has been my issue. The dropdown is from an array of camera lenses like this:-

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

Here’s the Javascript code and the 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.');
});

I’d appreciate any help i can get, thanks

Advertisement

Answer

First of all you need to use the cameraSelect when you are building the lenses string.

Then you need to put that populated lenses variable in the innerHTML variable, for the select options.

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