Как мне повторить структуру div для каждого объекта в массиве json?

Question

У меня есть приложение ASP. NET MVC, которое создает массив json. Я знаю, что если бы я хотел отобразить на своей странице следующее 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. Как мне l oop структуру HTML в javascript, чтобы эта структура div:row отображалась или повторялась для каждого фрукта в массиве json?

Answer 1

Вы можете записать класс-оболочку для всех фруктов как

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

Теперь следующей задачей будет написать функцию, которая создает div фруктов, который содержит FruitId, Name и Description.

Алгоритм будет выглядеть так:

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

Теперь мы можем l oop поверх данных и вызвать эту функцию для определенных c полученных данных.