1

How can I get each id in the routes array from each markers in this JavaScript object while still referencing 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"
                }
            ]
        }
    ]
}

There are more markers in the actual result, this was shortened to save space. Here is my 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');

});

Example: http://jsbin.com/uniyar/2/edit

Update

Silly me the code order was wrong, I was running the second loop before creating the actual element. Re-ordered and works fine.

$.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);
        });
});
4

2 回答 2

0

这是一个小范围问题，您可以轻松解决...

$.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); 
});
于 2013-05-01T11:15:48.293 回答
0

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

$.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);
        });
});

工作正常

于 2013-05-01T11:14:01.847 回答