Reading JSON Response in AngularJS

Question

I have an angular controller called productImages which returns following JSON data:

{
    "Product_1":[
        {   "image_id":"12469",
            "name":"My Product 1 - Variety 1",
            "url":"\/\/mystorefront.net\/120\/small\/1911791794.jpg"
        },
        {
            "image_id":"12470",
            "name":"My Product 1 - Variety 2",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/121\/small\/1911802897.jpg"
        }
    ],
    "Product_2":[
        {   "image_id":"122349",
            "name":"My Product 2 - Variety 1",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/122\/small\/1911791794.jpg"
        },
        {
            "image_id":"123470",
            "name":"191123897.jpg",
            "name":"My Product 2 - Variety 2",
            "url":"\/\/drfuittf5cya9.cloudfront.net\/123\/small\/1911802897.jpg"
        }
    ]
}   

In my angular code I have written:

<div ng-controller="productImages"> 
  <div ng-repeat="product in products">
    {{product.image_id}}
  </div>
</div>   

When I run this the ng-repeat div gets repeated twice but product.image_id does not show up. If I do {{product}} instead or {{product.image_id}} I get the whole JSON printed.

How do I print this JSON in angularJS? Also, How do I get Product_1 , Product_2 printed?

Answer 1

Your object Product_1 seems to be an array which in turn has images.

I think you will need nested for loops to display the images

Answer 2

You try to repeat over the properties of an object. Accourding to the documentation here you'll have to use

<div ng-repeat="(key, value) in myObj"> ... </div>

each property of your object is an array so I think that something like:

 <div ng-repeat="(key, value) in myObj">
   <div ng-repeat= "product in value">
      {{product.image_id"}}
   </div>
 </div>

should do the trick

Answer 3

Use two loops for this as:

 angular.module('app',[]).controller('mainCtrl', function($scope){ $scope.products = { "Product_1":[ { "image_id":"12469", "name":"My Product 1 - Variety 1", "url":"\\/\\/mystorefront.net\\/120\\/small\\/1911791794.jpg" }, { "image_id":"12470", "name":"My Product 1 - Variety 2", "url":"\\/\\/drfuittf5cya9.cloudfront.net\\/121\\/small\\/1911802897.jpg" } ], "Product_2":[ { "image_id":"122349", "name":"My Product 2 - Variety 1", "url":"\\/\\/drfuittf5cya9.cloudfront.net\\/122\\/small\\/1911791794.jpg" }, { "image_id":"123470", "name":"191123897.jpg", "name":"My Product 2 - Variety 2", "url":"\\/\\/drfuittf5cya9.cloudfront.net\\/123\\/small\\/1911802897.jpg" } ] } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' ng-controller='mainCtrl'> <div ng-repeat="product in products"> <div ng-repeat="item in product"> {{item.image_id}} </div> <hr/> </div> </div> 

Answer 4

Your JSON syntax is incorrect. If I understand correctly, each of our product has several varieties. It should be as follows:

{
    "Products": [
        {
            "Product": [
                {
                    "image_id": "12469",
                    "name": "My Product 1 - Variety 1",
                    "url": "//mystorefront.net/120/small/1911791794.jpg"
                },
                {
                    "image_id": "12470",
                    "name": "My Product 1 - Variety 2",
                    "url": "//drfuittf5cya9.cloudfront.net/121/small/1911802897.jpg"
                }
            ]
        },
        {
            "Product": [
                {
                    "image_id": "122349",
                    "name": "My Product 2 - Variety 1",
                    "url": "//drfuittf5cya9.cloudfront.net/122/small/1911791794.jpg"
                },
                {
                    "image_id": "123470",
                    "name": "My Product 2 - Variety 2",
                    "url": "//drfuittf5cya9.cloudfront.net/123/small/1911802897.jpg"
                }
            ]
        }
    ]
}

And you HTML should be:

<div ng-controller= "Products"> 
  <div ng-repeat= "for oneproduct in Products">
    <div ng-repeat="for variety in oneproduct">
      {{variety.image_id"}}
    </div>
  </div>
</div>

Not tested this though...

Answer 5

You can't iterate on the object productImages because it's not an array. You can iterate the objects "Product_1" and "Product_2".

If you want iterate the object productImage you have to write it ad an array.