Javascript 如何转换网页中的JSON数据并将数据放入特定的div？

我是前端新手，在过去的几周里我一直在寻找提示/相关的解决方案，但仍然没有运气。我希望我能解决它在这里…我目前正在建设我的第一个网站。我正在创建一个“查找配方”网站，因为我对API调用一无所知，所以我创建了一个本地Json文件，其中包含一些配方数据。格式如下所示：

[
  {
        "name": "Fresh Pumpkin Puree (for Pumpkin Pie Filling)",
        "description": "Homemade pumpkin purée. Roasting and draining is the secret to a perfect pumpkin pie filling that will reach canned pumpkin consistency. Use sugar pumpkins(~8 inches, 25 cm in diameter) instead of big pumpkins.",
        "tag": [
            "Puree",
            "Dessert"
        ],
        "ingredient": [
            {
                "amount": "3",
                "unit": "pounds",
                "name": "pumpkin"
            }
        ],
        "step": [
            {
                "description": "Preheat your oven to 375℉ (190℃) F. Cut each sugar pumpkin in half and scoop out the pulp and seeds. We use a grapefruit spoon which seems to help clean out the pulp but a soup spoon works just fine."
            },
            {
                "description": "Line a rimmed baking sheet with parchment paper. Place pumpkin halves cut side down on the paper and roast for 45 minutes until soft and easily pierced with knife, fork or skewer.",
                "img": "stepimg/pumpkin2.jpg"
            },
            {
                "description": "Carefully flip the pumpkin halves cut side up and return to the oven and roast for another 30 minutes.",
                "img": "stepimg/pumpkin3.jpg"
            },
            {
                "description": "Remove from the oven and cool for about 5 minutes. Scoop out the flesh from the skins into the bowl of a food processer. Process until very smooth, several minutes."
            },
            {
                "description": "Transfer the pumpkin purée to a fine-mesh strainer or colander lined with cheesecloth and set over a bowl. Drain for at least one hour.",
                "img": "stepimg/pumpkin5.jpg"
            },
            {
                "description": "Add the wine. Tip: pour the wine into the tomato paste jar and shake it to get the last of the paste out."
            },
            {
                "description": "Add canned tomatoes, cumin, caraway seeds, bay leaves, paprika, erythritol, concentrated stock, and pepper. Yes, that is a lot of cumin; it will be fine. Bring to low boil, reduce heat, simmer for 20 min"
            },
            {
                "description": "Place de-stemmed Swiss chard leaves on top of cooked tomato mixture. Make 8 small depressions with a spoon"
            },
            {
                "description": "Crack one egg into each depression. Cover (a transparent lid is ideal)"
            },
            {
                "description": "Cook until egg white is _just_ set. Serve immediately, in the pan."
            }
        ],
        "notes": "The resulting purée should stand up on its own only slightly slumping when piled high. If the puree is too thick (unlikely), you can thin it with some of the drained liquid. If it's too runny allow it to drain further.",
        "source": "[Fresh Pumpkin Puree (for Pumpkin Pie Filling)](https://recipeland.com/recipe/v/fresh-pumpkin-puree-for-pumpkin-57531)",
        "image": "https://recipeland.com/images/r/22001/e5e9854cbfecece089f6_550.jpg"
    },
]

我已经用html和css为结果页面和烹饪步骤页面制作了静态界面

            <div class="colm">
            <img src="image/leftdish.jpg">
            <h5 class="dishNameh5">Dish Name</h5>
            <ul class="ingSummary">
                 <li class="w3-large"><i class="material-icons w3-large">nature</i>
                    <span class="ingContent">beef, spanish, salt, oil, soy sauce, beef, spanish, salt, oil, soy sauce</span>
                 </li>
                <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                    <span class="ingContent">30 minutes</span>
                 </li>
            </ul>
        </div>
        <div class="colm">
            <img src="image/middish.jpg">
            <h5 class="dishNameh5">Dish Name</h5>
            <ul class="ingSummary">
                <li class="w3-large"><i class="material-icons w3-large">nature</i>
                    <span class="ingContent">beef, spanish, salt, oil, soy sauce, beef, spanish, salt, oil, soy sauce</span>
                </li>
                <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                    <span class="ingContent">30 minutes</span>
                </li>
            </ul>
        </div>
        <div class="colm">
            <img src="image/rdish.jpg">
            <h5 class="dishNameh5">Dish Name</h5>
            <ul class="ingSummary">
                <li class="w3-large"><i class="material-icons w3-large">nature</i>
                    <span class="ingContent">beef, spanish, salt, oil, soy sauce, beef, spanish, salt, oil, soy sauce</span>
                </li>
                <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                    <span class="ingContent">30 minutes</span>
                </li>
            </ul>
        </div>

 <section id="ingOverview">
    <div class="ov3070container">
        <div class="ovLeft">
        </div>
        <div class=ovRight>
            <h3>DISH NAME</h3>
            <div class="ovRight-left">
                    <ul class="SingleIngSummary">                                
                            <h4>Main Ingredients</h4>
                            <li class="w3-large"><i class="material-icons w3-large">nature</i>
                            <span class="dishName">Salmon, green onion</span>
                            </li>
                            <h4>Secondery Ingredients</h4>
                            <li class="w3-large"><i class="material-icons w3-large">nature</i>
                                <span class="dishName">Salt, oil, soy sauce, or any seasoning of you choice</span>
                            </li>
                    </ul>                    
            </div>
            <div class="ovRight-right">
                    <ul class="SingleIngSummary">
                            <h4>Difficulity</h4>
                            <li class="w3-large"><i class="material-icons w3-large">bubble_chart</i>
                            <img src="image/rating.png" height="22px" width="126px">
                            <span class="smText">Elemantary</span>
                            </li>
                            <h4>Cooking Time</h4>
                            <li class="w3-large"><i class="material-icons w3-large">timelapse</i>
                            <img src="image/rating.png" height="22px" width="126px">   
                            <span class="smText">10 Minutes</span>
                            </li>
                    </ul>
            </div> 
        </div>  
        </div>
    </div>
</section>
<div class="divideLine"></div>
<section id="cookingSteps">
    <div class="Container1008">
        <p><span class="bgText">1.</span>&nbsp Preheat grill on high heat. After grill is heated, clean grate with grill brush. Reduce heat to medium high heat.</p>
        <img src="image/rawsalmon.jpg" alt="img">
        <div class="divideLine2"></div>

        <p><span class="bgText">2.</span>&nbsp Generously oil the grill grate by squirting some vegetable oil on a paper towel and using grill tongs, rub the oil on the grill grate.</p>
        <img src="image/onion.jpg" alt="img">
        <div class="divideLine2"></div>

        <p><span class="bgText">3.</span>&nbsp Season salmon fillets with salt and pepper. Place salmon diagonally on the grill grate. Grill salmon for 3-4 minutes per inch of thickness on each side with the lid closed.</p>
        <img src="image/grilled_salmon.jpg" alt="img">
    </div>  
</section>

菜名

性质
牛肉，西班牙，盐，油，酱油，牛肉，西班牙，盐，油，酱油

时间空间
30分钟


菜名

性质
牛肉，西班牙，盐，油，酱油，牛肉，西班牙，盐，油，酱油

时间空间
30分钟


菜名

性质
牛肉，西班牙，盐，油，酱油，牛肉，西班牙，盐，油，酱油

时间空间
30分钟


菜名

主要成分
性质
大马哈鱼、大葱

次要成分
性质
盐、油、酱油或您选择的任何调味品



困难
气泡图
元素的

烹饪时间
时间空间
10分钟


1.以高热量预热烤架。烤架加热后，用烤刷清洁烤架。将热量减至中高热量

2.将一些植物油喷在纸巾上，然后用烤架钳在烤架上摩擦，为烤架大量上油

3.用盐和胡椒粉调味鲑鱼片。将鲑鱼斜放在烤架上。盖上盖子，每英寸厚度烤3-4分钟

我想知道如何将Json文件中的数据插入html文件中的div？那么JSON中的实际“名称”、“成分”、“步骤”等将正确显示吗

---

感谢您的帮助您需要做的是编写一些JavaScript来迭代JSON对象，然后设置相应HTML元素的HTML/文本

因此，如果您有一个数组，如：

{name: "Pizza",ingredients:["tomatoes","cheese","dough"]}

您的JS必须：

循环使用JSON

迭代每个对象并获取值

将文本插入其各自的HTML div中

---

您需要做的是编写一些JavaScript来迭代JSON对象，然后设置相应HTML元素的HTML/文本

因此，如果您有一个数组，如：

{name: "Pizza",ingredients:["tomatoes","cheese","dough"]}

您的JS必须：

循环使用JSON

迭代每个对象并获取值

将文本插入其各自的HTML div中

---

假设您希望使用JSON中的数据创建新的HTML：

获取当前HTML的一块，复制它并删除所有数据。然后，您可以将带有新数据的模板文本附加到页面中

let recipe = {description: 'Super cool recipe'};
let newHTML = `<div>${recipe.description}</div>`;

let recipe={description:'Super cool recipe'}；
让newHTML=`${recipe.description}`；

---

在那之后，你只需要在页面中找到你想要粘贴它的地方，然后把它放在那里。您可以使用，或者如果您正在使用jQuery，您可以使用

$（someElement）。在（newHTML）

之后，假设您希望使用JSON中的数据创建新的HTML：

获取当前HTML的一块，复制它并删除所有数据。然后，您可以将带有新数据的模板文本附加到页面中

let recipe = {description: 'Super cool recipe'};
let newHTML = `<div>${recipe.description}</div>`;

let recipe={description:'Super cool recipe'}；
让newHTML=`${recipe.description}`；

---

在那之后，你只需要在页面中找到你想要粘贴它的地方，然后把它放在那里。您可以使用，或者如果您使用的是jQuery，您可以使用

$（someElement）。在（newHTML）

之后，假设传入的

JSON

来自以下内容：

.done(function( data ) {} ... , "json");

  .done(function( data ) {
    $("#dishSpanID").html(data[0].name);
  }

然后，您可以标记跨度（待填充），如下所示：

---

这只是一个示例，您需要为页面上的每个元素执行此操作。

好的，假设传入的

JSON

来自以下内容：

let recipe = {description: 'Super cool recipe'};
let newHTML = `<div>${recipe.description}</div>`;

.done(function( data ) {} ... , "json");

  .done(function( data ) {
    $("#dishSpanID").html(data[0].name);
  }

然后，您可以标记跨度（待填充），如下所示：

---

这只是一个示例，您需要为页面上的每个元素执行此操作。

这是一个示例，用于执行您想要的操作

let recipe = {description: 'Super cool recipe'};
let newHTML = `<div>${recipe.description}</div>`;

有了JSON对象，就必须映射JSON并创建html结构，以便附加到模板容器中

var数据