Question

所以我有一个JSON文件，其中包含离开数组。我想循环遍历每条公交线路并将其显示在div中：

<div class="bus">
    <div class="line">departure.line</div>
    <div class="direction">departure.direction</div>
    <div class="time">departure.time</div>
</div>

每个入站总线都有自己的总线div，里面有所有相关信息。我已经显示其中一个，但是我不确定如何迭代它们并将它们显示在正确的位置。

我愿意使用vanilla JavaScript或jQuery。

这是我想要迭代的数组的jsfiddle：http://jsfiddle.net/tmm7b31w/

Answer 1

你需要一个foreach循环来简单地浏览元素。见下面的示例：

$.each(item, function(index1, item1){
    var divContent = 
        '<div class="line">' + item1.line + '</div>' +
        '<div class="direction">' + item1.direction + '</div>' +
        '<div class="time">' + item1.aimed_departure_time + '</div>';

        $('#container').append(divContent);
});

我更新了你的小提琴here。

Answer 2

你想要为每个人使用a，就像这样：

HTML

<div class="bus prototype">
    <div class="line"></div>
    <div class="direction"></div>
    <div class="time"></div>
</div>

JavaScript（使用jQuery）

var parent = $('body');
var prototype = $('.bus.prototype');

$.each(data.departures, function(index, departure) {
    var bus_div = prototype.clone();

    bus_div.find('.line').text(departure.line);
    //etc...

    parent.append(bus_div);
});

您也可以使用vanilla JavaScript for循环。

for (var i = 0; i < data.departures.length; i++) {
    var departure = data.departures[i];

    var bus_div = prototype.clone();

    bus_div.find('.line').text(departure.line);
    //etc...

    parent.append(bus_div);
}

在JSON中循环数组的最佳方法是什么？

2 个答案: