如何修复Javascript中的代码以避免HTML中的重复元素？

Question

index.html

 <!--FIRST PIZZA---FIRST CHUNK OF HTML CODE-->
        <div class="column-pizza-1">
          <a href="">
            <div class="pizza-item--img">
              <img src="" id="pizza-img-1" />
            </div>
            <div class="pizza-item--add" id="selected-1">Add</div>
          </a>
          <div class="pizza-item--price" id="pizza-price-1">Rs. --</div>
          <div class="pizza-item--name" id="pizza-name-1">--</div>
          <div class="pizza-item--desc" id="pizza-desc-1">--</div>
        </div>
<!--SECOND PIZZA---SECOND CHUNK OF HTML CODE-->
            <div class="column-pizza-2">
              <a href="">
                <div class="pizza-item--img">
                  <img src="" id="pizza-img-2" />
                </div>
                <div class="pizza-item--add" id="selected-2">Add</div>
              </a>
              <div class="pizza-item--price" id="pizza-price-2">Rs. --</div>
              <div class="pizza-item--name" id="pizza-name-2">--</div>
              <div class="pizza-item--desc" id="pizza-desc-2">--</div>
              <div class="pizza-item--sizes" id="pizza-size-2">
            </div>

pizzas.json

[
  {
    "id": 1,
    "name": "Tandoori Paneer",
    "img": "/images/pizza.png",
    "price": 200,
    "sizes": [0, 100, 200],
    "description": "Spiced paneer, Onion, Green Capsicum & Red Paprika in Tandoori Sauce",
    "cheese": [0, 100, 0]
  },
  {
    "id": 2,
    "name": "Veggie Supreme",
    "img": "images/pizza.png",
    "price": 250,
    "sizes": [0, 100, 200],
    "description": "Black Olives, Green Capsicum, Mushroom, Onion, Red Paprika, Sweet Corn",
    "cheese": [0, 100, 0]
  }
]

index.js

//FIRST PIZZA - loading json data and showing it on index.html page
fetch("pizzas.json").then((response) =>
  response.json().then((data) => {
    //console.log(data[0].name);
    document.querySelector("#pizza-img-1").src = data[0].img;
    document.querySelector("#pizza-name-1").innerHTML = data[0].name;
    document.querySelector(
      "#pizza-price-1"
    ).innerHTML = `Rs ${data[0].price.toFixed(2)}`;
    document.querySelector("#pizza-desc-1").innerHTML = data[0].description;
  })
);
//SECOND PIZZA
fetch("pizzas.json").then((response) =>
  response.json().then((data) => {
    //console.log(data[0].name);
    document.querySelector("#pizza-img-2").src = data[1].img;
    document.querySelector("#pizza-name-2").innerHTML = data[1].name;
    document.querySelector(
      "#pizza-price-2"
    ).innerHTML = `Rs ${data[1].price.toFixed(2)}`;
    document.querySelector("#pizza-desc-2").innerHTML = data[1].description;
  })
);

我的怀疑：

正如您在上面的代码中所看到的，我希望显示两个比萨饼项目的详细信息，它们的详细信息存储在json文件中，我使用将数据从json加载到HTML。对于每个比萨，我都在index.html中创建了一个不太好的元素。让我们假设将来我想显示50个比萨的详细信息，所以这意味着在html中创建50块代码。

请有人告诉我，如何使用HTML代码中的一个块，并多次使用它来使用香草javascript创建更多的比萨饼项目。

我的看法：

我考虑将json数据存储为全局变量，然后使用onload()和ready()加载数据，但我不确定如何实现。

Answer 1

您可以在JavaScript中创建一个HTML，并使用它根据JSON文件中的数据生成多个<div>。

使用，您可以轻松地与一起使用

​

fetch("https://api.jsonbin.io/b/605b2c5aaee69516ee8a8866/2").then((response) =>
  response.json().then((data) => {

    let jsonSize = data.length;

    let htmlContent = '';
    for (let i = 0; i < jsonSize; i++) {
      let id = data[i].id;
      let name = data[i].name;
      let img = data[i].img;
      let price = data[i].price;
      let sizes = data[i].sizes;
      let description = data[i].description;
      let cheese = data[i].cheese;

      htmlContent += `
           <div class="column-pizza">
            <a href="">
              <div class="pizza-item--img">
                <img src="${img}" id="pizza-img-${i}" />
              </div>
              <div class="pizza-item--add" id="selected-${i}">Add</div>
            </a>
            <div class="pizza-item--price" id="pizza-price-${i}">₹${price}</div>
            <div class="pizza-item--name" id="pizza-name-${i}">${name}</div>
  <div class="pizza-item--desc" id="pizza-desc-${i}">${description}</div>
</div>`;
    }
    document.querySelector("#root").innerHTML = htmlContent;

  })
);

.column-pizza {
  height: auto;
  width: 50vv;
}


.pizza-item--add,
.pizza-item--price {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.pizza-item--add {
  background-color: #4CAF50;
  /* Green */
}

.pizza-item--price {
  background-color: #333;
  /* Gray */
}

<div id="root"></div>

​

PS-不要有比萨饼图像占位符，因此使用一些随机和️图像。

Answer 2

这是一个演示

• 您可以使用异步/等待来获取json
• ，使用映射将数组转换为标记
• 使用innerHTML来追加一串html内容

​

document.addEventListener('DOMContentLoaded', async ev => {
  const res = await fetch('https://jsonplaceholder.typicode.com/photos')
  const data = await res.json()
  const photos = data.slice(0, 100)


  const appEl = document.querySelector('#app')
  appEl.innerHTML = photos.map((photo, index) => {
    return `<div class="photo" style="transition-delay: ${index / 10}s">
                  <div class="image">
                    <a href="${photo.url}"><img src="${photo.thumbnailUrl}" alt="thumbnailUrl" /></a>
                  </div>
                  <div class="title">
                    <a href="${photo.url}">${photo.title}</a>
                  </div>
                </div>`
  }).join('')
  setTimeout(() => {
    appEl.classList.add('loaded')
  }, 0)
}, false)

#app {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
}

.photo {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-100vw, -100vh);
}

#app.loaded .photo {
  position: static;
  transition: all ease 1s;
  transform: translate(0, 0);
}

.image {
  text-align: center;
  transition: transform ease 1s;
}

.image:hover {
  transform: scale(1.1);
}

.title a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: midnightblue;
  text-decoration: none;
}

.title a:hover {
  color: dodgerblue;
}

<div id="app"></div>

​