javascript - 从 JavaScript angular js 中的 URL 成功获取数据(Ajax)

Question

我正在使用 Angular 移动 Ui 框架工作。我正在从 Controller 中的 URL 获取数据。但现在我想在成功部分获得特定数据。我将展示我的代码片段以获取提示。

HTML:

   <div class="jumbtron scrollable-content text-center bg-color">
   <div class="row">
          <div class="bgImage">  
          </div>
          <div class="btn-group img-responsive"  ng-controller="MyControllerCity"> 
              <div ng-repeat="prdct in cityProduct">
                   <a href="#/category-prduct" style="color:#763428; font-weight:bold;">
                      <img  src="{{prdct.categoryImage}}">
                    </a>
              </div>
          </div>

    </div>
</div>

HTML 输出

Controller :

.controller('MyControllerCity',function($scope, $http){ 
        $http({
                method:'get',
                url:'http://192.168.0.3/sf/app/city-home/1',
                headers: {'Content-Type': 'application/json'},
            }).success(function(data, status,headers, config) {
                $scope.cityProduct = data; 
                console.log("aaaaaaa" + cityProduct.categoryId);

            }).error(function(data, status, headers ,config) {

        })

})

console.log("aaaaaaa" + cityProduct.categoryId);

但 categoryId 没有显示在控制台中。

JSON 屏幕截图:

这是 JSON 响应:

[{
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/cake.jpg",
    "categoryName": "cakes",
    "categoryId": 4
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/flowers.jpg",
    "categoryName": "flowers-and-bouquets",
    "categoryId": 12
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/chocolates.jpg",
    "categoryName": "chocolates-for-all",
    "categoryId": 63
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/mugs.jpg",
    "categoryName": "Mugs",
    "categoryId": 34
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/figurines.jpg",
    "categoryName": "figurines",
    "categoryId": 84
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/giftframes.jpg",
    "categoryName": "gift-and-photo-frames",
    "categoryId": 106
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/greetingcards.jpg",
    "categoryName": "greeting-cards",
    "categoryId": 103
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/handicrafts.jpg",
    "categoryName": "handicrafts",
    "categoryId": 44
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/penstands.jpg",
    "categoryName": "pen-stands",
    "categoryId": 142
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/combos.jpg",
    "categoryName": "gift-combos",
    "categoryId": 99
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/softtoys.jpg",
    "categoryName": "soft-toys",
    "categoryId": 104
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/diecasttoys.jpg",
    "categoryName": "diecast-toys",
    "categoryId": 138
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/jewellery.jpg",
    "categoryName": "jewellery",
    "categoryId": 41
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/clocks.jpg",
    "categoryName": "clocks",
    "categoryId": 137
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/crystalgifts.jpg",
    "categoryName": "crystal gifts",
    "categoryId": 136
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/lamps.jpg",
    "categoryName": "lamps",
    "categoryId": 97
}, {
    "categoryImage": "https://www.winni.in/assets/img/app/city-home/slambook.jpg",
    "categoryName": "slambook",
    "categoryId": 139
}]

我想在控制台中获取 categoryId。

我用过:

console.log("categoryId "+cityProduct[0].categoryId);

但是出现了一些错误，我将向您展示控制台错误的屏幕截图:

提前致谢。

Answer 1

您的 JSON 是一个对象数组，因此您需要像这样访问它:

$scope.cityProduct[0].categoryId

或者更动态的东西:

$scope.cityProduct.forEach(function(product) {
    console.log(product.categoryId);
});

另请注意，您在第一次设置 cityProduct 变量后错过了 $scope。