如何为 json 数组中的每个对象重复 div 结构？答案

【问题标题】：How do I repeat div structure for each object in json array?如何为 json 数组中的每个对象重复 div 结构？
【发布时间】：2020-11-22 10:32:05
【问题描述】：

我有一个生成 json 数组的 ASP.NET MVC 应用程序。我知道如果我想在我的页面上显示以下 Json：

[{"FruitId":1, "Name":"Apple", "Description":"Red Delicious"}]

我可以为 HTML 做这样的事情：

<div class="row">
    <div id="fruitName"></div>
    <div id="fruitId"></div>
    <span id="fruitDescription" class="test"></span>
</div>

然后在javascript中：

$(document).ready(function(){
    var fruitId = $("#fruitId");
    var fruitName = $("#fruitName");
    var fruitDescription = $("#fruitDescription");

    $.get("https://example.com/some/json", function (data) {    
        $.each(data, function (index, row) {
        $(fruitId).html(row.fruitId)
        $(fruitName).html(row.Name)
        $(fruitDescription).html(row.Description)
   });
});

假设我有不止一个fruit。如何在 javascript 中循环 HTML 结构，以便 div:row 结构为 json 数组中的每个水果显示或重复？

【问题讨论】：

标签： javascript json asp.net-mvc

【解决方案1】：

你可以为所有水果编写包装类

<div id="fruits-container">
</div>

现在，下一个任务是编写一个函数来创建包含 FruitId、Name 和 Description 的水果 div。

算法就像，

function appendFruit(id, name, description ) {
    // create fruit div
    // add class to div
    // create children for Name, Id, Description
    // append element to fruitsContainer
}

现在，我们可以遍历数据并调用这个函数来接收特定的数据。

【讨论】：