javascript - 从嵌套数组中获取数据

Question

如何从该 JavaScript 对象中的每个 markers 获取 routes 数组中的每个 id，同时仍然引用 item.id :

{
    "markers": [
        {
            "id": "77475",
            "smsCode": "77475",
            "name": "Abbey Sports Centre",
            "stopIndicator": "Y",
            "towards": "Goodmayes or Upney",
            "direction": "sw",
            "lat": 51.53472971807365,
            "lng": 0.07973349341716908,
            "routes": [
                {
                    "id": "62",
                    "name": "62"
                },
                {
                    "id": "287",
                    "name": "287"
                },
                {
                    "id": "368",
                    "name": "368"
                },
                {
                    "id": "387",
                    "name": "387"
                },
                {
                    "id": "687",
                    "name": "687"
                }
            ]
        }
    ]
}

实际结果中有更多标记，为了节省空间而缩短了。这是我的 jQuery。

$.each(data.markers, function(i,item){
        $.each(item.routes, function(i,routes){   
            $('<span>').html(routes.id + " ").appendTo("#p_" + item.id);         
            //alert("#p_" + item.id + " " +routes.id);
        });

$('<li>').html(
    "<a href=#_" + item.id +" onclick=getBusListingForStop(" + item.id + ");><h2>" + item.name + " (Stop " + item.stopIndicator + ") to " + item.towards + "</h2><p id='p_" + item.id + "'>Buses: " + item.lat + " " + item.lng + "</p></a>"
).appendTo('#stopListing');

});

示例: http://jsbin.com/uniyar/2/edit

更新

愚蠢的是，代码顺序错误，我在创建实际元素之前运行了第二个循环。重新订购并且工作正常。

$.each(data.markers, function(i,item){        
  
  $('<li>').html(
    "<a href=#_" + item.id +" onclick=getBusListingForStop(" + item.id + ");><h2>" + item.name + " (Stop " + item.stopIndicator + ") to " + item.towards + "</h2><p id='p_" + item.id + "'>Buses:</p></a>"
).appendTo('#stopListing');
  
  $.each(item.routes, function(i,routes){   
            $('<span>').html(routes.id + " ").appendTo("#p_" + item.id);         
            //alert("#p_" + item.id + " " +routes.id);
        });
});

Answer 1

愚蠢的是，代码顺序错误，我在创建实际元素之前运行了第二个循环。重新订购并且工作正常。

$.each(data.markers, function(i,item){        

  $('<li>').html(
    "<a href=#_" + item.id +" onclick=getBusListingForStop(" + item.id + ");><h2>" + item.name + " (Stop " + item.stopIndicator + ") to " + item.towards + "</h2><p id='p_" + item.id + "'>Buses:</p></a>"
).appendTo('#stopListing');

  $.each(item.routes, function(i,routes){   
            $('<span>').html(routes.id + " ").appendTo("#p_" + item.id);         
            //alert("#p_" + item.id + " " +routes.id);
        });
});

Works Fine