Блог

Я работаю над проектом, цель которого-заставить меня использовать fetch для создания динамической карточки продуктов.

Я добился того, чтобы получать и использовать информацию в файле JSON, однако мои товары были сгенерированы внутри одного и того же div вместо заполнения одной карточки продукта (div).

 main();

function main() {
  const getJsonData = fetch('http://localhost:3000/api/cameras')
    .then(response => response.json());

  getJsonData
    .then(function(dispatchData) {
      const products = dispatchData;

      for (let item in products) {

        /*Implémentation de la carte - Card*/
        let getPrincipalContainer = document.getElementById("products");
        let createCard = document.createElement("div")
        createCard.className = 'product-card';
        getPrincipalContainer.append(createCard)

        /*Implémentation de l'img - IMG*/
        let generatingImg = document.querySelector(".product-card")
        let createImg = document.createElement("img")
        createImg.className = "card-img-top";
        createImg.src = dispatchData[item].imageUrl
        generatingImg.appendChild(createImg)

        /*Implémentation du Nom - Name */
        let generateName = document.querySelector(".product-card")
        let createName = document.createElement("h2")
        createName.className = "card-title"
        createName.innerText = dispatchData[item].name
        generateName.appendChild(createName)

        /*Implémentation du prix - Price*/
        let generatePrice = document.querySelector(".product-card")
        let createPrice = document.createElement("p")
        createPrice.className = "product-price"
        createPrice.innerText = dispatchData[item].price
        generatePrice.appendChild(createPrice)

        /*Lien  vers la fiche produit - Link to product-sheet*/
        let generateLink = document.querySelector(".product-card")
        let createLink = document.createElement("a")
        createLink.className = "product-sheet-link"
        createLink.innerText = "Voir la fiche produit"
        generateLink.appendChild(createLink)
      }

    })
}
 

Вы выполняете запрос по имени класса, так не должно ли это дать вам массив всех элементов с этим классом вместо последнего, который вы создали(как вы, вероятно, ожидаете)?

Попробуйте заменить запрос фактической ссылкой product-card , определенной вами в начале каждой итерации. Что-то вроде этого:

 main();

function main() {
  const getJsonData = fetch('http://localhost:3000/api/cameras')
    .then(response => response.json());

  getJsonData
    .then(function(dispatchData) {
      const products = dispatchData;

      for (let item in products) {

        /*Implémentation de la carte - Card*/
        let getPrincipalContainer = document.getElementById("products");
        let createCard = document.createElement("div")
        createCard.className = 'product-card';
        getPrincipalContainer.append(createCard)

        /*Implémentation de l'img - IMG*/
        let createImg = document.createElement("img")
        createImg.className = "card-img-top";
        createImg.src = dispatchData[item].imageUrl
        createCard.appendChild(createImg)

        /*Implémentation du Nom - Name */
        let createName = document.createElement("h2")
        createName.className = "card-title"
        createName.innerText = dispatchData[item].name
        createCard.appendChild(createName)

        /*Implémentation du prix - Price*/
        let createPrice = document.createElement("p")
        createPrice.className = "product-price"
        createPrice.innerText = dispatchData[item].price
        createCard.appendChild(createPrice)

        /*Lien  vers la fiche produit - Link to product-sheet*/
        let createLink = document.createElement("a")
        createLink.className = "product-sheet-link"
        createLink.innerText = "Voir la fiche produit"
        createCard.appendChild(createLink)
      }

    })
}