如何将javascript文件转换为包装函数并在html页面中使用它？_Javascript_Html_Json

如何将javascript文件转换为包装函数并在html页面中使用它？

javascript html json

如何将javascript文件转换为包装函数并在html页面中使用它？,javascript,html,json,Javascript,Html,Json,我有一个存储产品项的json文件。我需要使用纯javascript将这些项目呈现到index.html。因此，我创建了一个javascript文件，并使用fetch…然后一个接一个地获取json项，如下所示：- store.js fetch("./data.json") .then((response) => { return response.json(); }) .then((data) => { const allItemCont

我有一个存储产品项的json文件。我需要使用纯javascript将这些项目呈现到

index.html

。因此，我创建了一个javascript文件，并使用

fetch…然后一个接一个地获取json项，如下所示：-


store.js
fetch("./data.json")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    const allItemContainer = document.getElementById("all-items");

    data.pizza.forEach((item) => {
         //creating elements/div here for each item
   });
});

我的html在其中呈现如下内容：-
    <body>
        <div id="all-items" class="shop-items"></div>
        <script src="store.js"></script>
    </body>



我该怎么做？有人能提供一个片段吗？只需在上的元素上添加forEach
，然后
块并使用appendChild
在列表中添加

window.onload=（函数runOnLoad（）{
常量数组=[{
名称：“坦杜里披萨”，
价格：“200卢比”，
},
{
名称：“素食至上”，
价格：“250卢比”，
},
{
名称：“Veg Exotica”，
价格：“300卢比”，
},
{
名称：“鸡肉胡椒脆饼”，
价格：“400卢比”，
},
];
const allItems=document.querySelector（“所有项”）；
return（）=>{
array.forEach（（el）=>{
常量元素=document.createElement（“div”）；
const heading=document.createElement（“h1”）；
heading.textContent=el.name；
const para=document.createElement（“p”）；
para.textContent=el.price；
元素.子元素（标题）；
要素.附件（第6段）；
附加子元素（元素）；
});
};
})();
什么是JSON结构，您想创建什么类型的HTML元素？因为fetch
是一个异步函数，所以它会在执行其他JS代码后创建元素，那你为什么要创建一个包装函数呢？forEach
在数组中，在中创建HTML元素，然后谢谢你的回答，但是我想在包装函数中使用上面的代码，我可以在index.HTML by document.onLoad（）中使用它。有可能这样做吗？@NehaChaudhary是的，有可能。更新代码。这就是你想要的吗？哦。。这似乎很简单。事实上，我是个新手。我在想一些与iLife有关的事情。我们也可以用iLife.window.onload来做->
[
  {
    name: "Tandoori Pizza",
    price: "Rs.200",
  },
  {
    name: "Veggie Supreme",
    price: "Rs.250",
  },
  {
    name: "Veg Exotica",
    price: "Rs.300",
  },
  {
    name: "Chicken Pepper Crunch",
    price: "Rs.400",
  },
]