访问Angular中对象内的数组中的对象

时间:2015-09-02 17:47:51

标签: javascript json angularjs api mapbox

我很难从api调用访问数据并将其显示在Mapbox上。我可以在地图上显示一个标记,而我应该有10个标记。我认为我在使用ng-repeat做错了,但我不确定是什么。任何帮助,将不胜感激。

以下是查看API调用http://jsonblob.com/55e734cee4b01190df374f1e

的完整JSON响应的链接
// index.html
  <div ng-repeat="venue in bars.venues">
    <marker lat="{{venue.location.lat}}" lng="{{venue.location.lng}}">
      <h1>{{venue.name}}</h1>
      <p>{{venue.contact}}</p>
      <p>{{venue.location.formattedAddress}}</p>
    </marker>
  </div>

// app.js
    $http.get(url)
      .then(function (response) {
        $scope.bars = response.data.response;
    });

// sample data from api
{
  "meta": {
    "code": 200,
    "requestId": "55e72707498e3d9a002d7bc4"
  },
  "response": {
    "venues": [
      {
        "id": "42c1e480f964a520c4251fe3",
        "name": "The View",
        "contact": {
          "phone": "4158961600",
          "formattedPhone": "(415) 896-1600"
        },
        "location": {
          "address": "55 4th St",
          "crossStreet": "at Marriott Marquis",
          "lat": 37.78510950100554,
          "lng": -122.40469515323639,
          "distance": 29,
          "postalCode": "94103",
          "cc": "US",
          "city": "San Francisco",
          "state": "CA",
          "country": "United States",
          "formattedAddress": [
            "55 4th St (at Marriott Marquis)",
            "San Francisco, CA 94103",
            "United States"
          ]
        },
        "categories": [
          {
            "id": "4bf58dd8d48988d1d5941735",
            "name": "Hotel Bar",
            "pluralName": "Hotel Bars",
            "shortName": "Hotel Bar",
            "icon": {
              "prefix": "https://ss3.4sqi.net/img/categories_v2/travel/hotel_bar_",
              "suffix": ".png"
            },
            "primary": true
          }
        ],
        "verified": false,
        "stats": {
          "checkinsCount": 12634,
          "usersCount": 9499,
          "tipCount": 121
        },
        "url": "http://www.sfviewlounge.com",
        "hasMenu": true,
        "menu": {
          "type": "Menu",
          "label": "Menu",
          "anchor": "View Menu",
          "url": "https://foursquare.com/v/the-view/42c1e480f964a520c4251fe3/menu",
          "mobileUrl": "https://foursquare.com/v/42c1e480f964a520c4251fe3/device_menu"
        },

1 个答案:

答案 0 :(得分:1)

所以我弄清楚为什么只有一个标记显示出来。我以前使用角度谷歌地图,并使用ngMaps作为模块。删除后,我的所有标记都显示出来了。