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?

Your JSON is not in the right syntax for a ng-repeat statement. You cannot iterate of properties in an object. — navigator
– navigator, Commented Nov 5, 2015 at 13:31
Please read the documentation docs.angularjs.org/api/ng/directive/… — Paolo Moretti
– Paolo Moretti, Commented Nov 5, 2015 at 13:32

Anand Sunderraman · Accepted Answer · 2015-11-05 13:30:40Z

3

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

answered Nov 5, 2015 at 13:30

Anand Sunderraman

8,14633 gold badges99 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

André Kreienbring · Accepted Answer · 2015-11-05 13:37:39Z

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

answered Nov 5, 2015 at 13:37

André Kreienbring

2,50915 silver badges16 bronze badges

Comments

Emir Marques · Accepted Answer · 2015-11-05 13:40:58Z

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>

Thank you! Can you tell me how I can print "Product_1" and "Product_2"?
In <div ng-repeat="product in products"> you print as {{product.attribute}}

navigator · Accepted Answer · 2015-11-05 13:38:48Z

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...

Davide Repetto · Accepted Answer · 2015-11-05 13:39:38Z

0

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.

answered Nov 5, 2015 at 13:39

Davide Repetto

16

Collectives™ on Stack Overflow

Reading JSON Response in AngularJS

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Related