我是前端新手，过去几周我一直在寻找提示/相关解决方案，但仍然没有运气。我希望我能在这里解决它...我正在建立我的第一个网站。我正在制作一个“查找食谱”网站，因为我对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＆amp; 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>  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>  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>  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>
Here is a screenshot of the result page
Screenshot of the cooking step page
我想知道如何将我的Json文件中的数据插入到我的html文件中的DIV中？那么来自JSON的实际“名称”，“成分”，“步骤”等会正确显示吗？
感谢您的帮助
答案 0 :(得分：1)
您需要做的是编写一些JavaScript来迭代JSON对象，然后设置相应HTML元素的HTML /文本。
所以如果你有一个像：
这样的数组
{name: "Pizza",ingredients:["tomatoes","cheese","dough"]}
你的JS必须：
How to append data to div using JavaScript?
答案 1 :(得分：1)
假设您要使用JSON中的数据创建新的HTML：
获取当前HTML的一大块，复制它并删除所有数据。然后，您可以将带有新数据的模板文字附加到页面。
$(someElement).after(newHTML)之后你只需要在页面中找到你要粘贴它的位置，然后把它放在那里。您可以使用insertAdjacentHTML，或者如果您使用的是jQuery，则可以使用my-awesome-service:
build:
context: .
dockerfile: Dockerfile
args:
- FOO=${FOO}
答案 2 :(得分：0)
好吧，假设您的传入JSON来自：
.done(function( data ) {} ... , "json");
然后您可以标记您的跨度（待填充），如：
<span id="dishSpanID" class="ingContent">beef, spanish, ... , soy sauce</span>
然后你可以插入这些跨度：
.done(function( data ) {
$("#dishSpanID").html(data[0].name);
}
这只是一个示例，您需要为页面上的每个元素执行此操作。
答案 3 :(得分：0)
这是做你想做的事的一个例子。
你有你的JSON对象，然后你必须映射JSON并创建你的html结构以附加到模板容器。
var data = [
{
name : "Fred",
last : "Durst"
},
{
name : "Jonathan",
last : "Davis"
},
{
name : "Corey",
last : "Taylor"
}
]
var htmlStructure="";
data.forEach(function(element){
htmlStructure += "<li>"+ element.name + ' ' + element.last + "</li>"
});
$('#container').append(htmlStructure)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="container">
</ul>
</div>