如何修复 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 文件中，并且我正在使用 vanilla javascript 将数据从 json 加载到 HTML。对于每个比萨饼，我都在 index.html 中创建了不好的元素。假设将来我想显示 50 个比萨饼的详细信息，这意味着在 html 中创建 50 个代码块。
有人可以告诉我如何只使用一段 HTML 代码并多次使用它来使用 vanilla javascript 创建尽可能多的披萨项目。

我的看法：
我正在考虑将 json 数据存储为全局变量，然后使用 onload() 和 ready() 加载数据，但我不知道该怎么做。

Answer 1

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

使用Template Literals，您可以轻松地使用loops

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- 没有披萨图片占位符，因此使用一些随机的 ? 和 ?️ 图片。