Question

如何在仍然引用id的同时从此JavaScript对象中的每个routes获取markers数组中的每个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

Answer 2

这是一个很容易解决的范围问题......

$.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');
createEachFunction = function(item){return function(i,routes){   
        $('<span>').html(routes.id + " ").appendTo("#p_" + item.id);         
        //alert("#p_" + item.id + " " +routes.id);
    }
 }
myEachFunction = createEachFunction(item);
$.each(item.routes, myEachFunction); 
});

从嵌套数组中获取数据

更新

2 个答案: