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

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>

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代码，并多次使用它来创建尽可能多的比萨饼项目使用香草javascript。

我的看法：

---

我想将json数据存储为一个全局变量，然后使用

onload（）

和

ready（）

加载数据，但我不知道该怎么做。

您可以在JavaScript中创建一个HTML模板，然后使用它根据json文件中的数据生成多个

使用您可以轻松地使用

fetch（“https://api.jsonbin.io/b/605b2c5aaee69516ee8a8866/2）然后（（回应）=>
response.json（）。然后（（数据）=>{
让jsonSize=data.length；
让htmlContent=''；
for（设i=0；i
.column批萨{
高度：自动；
宽度：50vv；
}
.比萨饼项目-添加，
.比萨饼项目-价格{
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}
.比萨饼项目-添加{
背景色：#4CAF50；
/*绿色的*/
}
.比萨饼项目-价格{
背景色：#333；
/*灰色的*/
}
这里是一个演示


您可以使用async/await获取json
使用“映射”将数组转换为标记
使用
innerHTML
附加一组html内容


document.addEventListener（'DOMContentLoaded'，async ev=>{
const res=等待取数（'https://jsonplaceholder.typicode.com/photos')
const data=await res.json（）
const photos=data.slice（01100）
const appEl=document.querySelector（“#app”）
appEl.innerHTML=photos.map（（照片，索引）=>{
返回`
`
}).加入（“”）
设置超时（（）=>{
appEl.classList.add（'loaded'）
}, 0)
}，false）
#应用程序{
显示器：flex；
柔性流：行换行；
对正内容：空间均匀；
对齐项目：居中；
位置：相对位置；
}
.照片{
宽度：200px；
高度：200px；
位置：绝对位置；
排名：0；
左：0；
转换：转换（-100vw，-100vh）；
}
#app.loaded.photo{
位置：静态；
过渡：所有1秒；
变换：平移（0,0）；
}
.形象{
文本对齐：居中；
转换：转换为1秒；
}
.图片：悬停{
转换：比例（1.1）；
}
.标题a{
溢出：隐藏；
文本溢出：省略号；
空白：nowrap；
宽度：100%；
显示：内联块；
文本对齐：居中；
字体系列：“Gill Sans”，“Gill Sans MT”，“Calibri”，“Trebuchet MS”，无衬线；
颜色：深蓝；
文字装饰：无；
}
.标题a：悬停{
颜色：淡蓝色；
}
执行一次请求，在作为响应的数组中循环，显示信息。看看这个应该有帮助。另外，请注意，您可以通过JSON.parse（）-API轻松地将JSON解析为普通JS对象。谢谢你。但是假设我需要显示50个比萨饼项目，那么我必须为它创建50个标签，对吗？有没有什么方法可以让我不必创建这么多标记，因为我希望应用程序是可行的。@NehaChaudhary在上面的代码中，我使用JavaScript创建了2个
标记，而不是用HTML硬编码。因此，如果您有50个甚至任意数字，那么上面的代码也可以工作，而不会更改一行代码。@NehaChaudhary但是，假设您的JSON中有100个项目。如果没有任何分页或无限滚动的方式，那么在一个页面上显示全部100个项目不是一个好方法。为此，我们需要使用graphQL或类似的东西，在这里我们将调用JSON文件，而不是从DB获取数据的API。非常感谢您的澄清。@NehaChaudhary，如果有帮助，请接受它作为答案。
//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;
  })
);