access certain element of JSON in angular JS

Question

Below is my JSON file:

[
{
    "Name":"Peter England Shirt",
    "Prodimage":["./images/zoom/zoom1hi.jpg","./images/zoom/zoom2hi.jpg","./images/zoom/zoom3hi.jpg"],
    "actualPrice":"90",
    "discountedPrice":"70",
    "desc":"Cotton",
    "Prodcolor":["#f1f40e","#adadad","#4EC67F"],
    "quantity":[1,3,4,5,60],
    "size":["XL","L","M","S"],
    "detail":"Take it away",
    "sizeChart":["16 waist","Measurements taken from size 30","Model wears size 31. Model is 6'2"],
    "shipping":[
        {
            "type":"Standard",
            "days":"5-6 days",
            "cost":"200"
        },{
            "type":"Next day",
            "days":"1 days",
            "cost":"500"
        }
    ],
    "sellerList":[
        {
            "sellerName":"ABC",
            "price":"566",
            "deliveryDay":"4-5 working days"
        },{
            "sellerName":"SEDF",
            "price":"300",
            "deliveryDay":"4-5 working days"
        },{
            "sellerName":"QWER",
            "price":"555",
            "deliveryDay":"2-5 working days"
        }
    ]

}
]

The JS file is as below:

var pJson="./json/product.json";
$http.get(pJson).success(function(response){
   $scope.product=response;});

Now, if I want to access "Name" attribute I can call {{product[0].Name}}.

But I am not able to access Prodimage attribute using ng-repeat. I am trying like this:

    <div  ng-repeat="image in product.Prodimage">
            {{image[0]}}
    </div>

is this wrong?>

Answered below it for you using $first and $index, good luck! — ajmajmajma
– ajmajmajma, Commented Jul 16, 2015 at 18:14

Ahmed Eid · Accepted Answer · 2015-07-16 18:00:30Z

1

Yes this is wrong ,, note that you have the product object as array ,, so if you want the first object you should do this

<div  ng-repeat="image in product[0].Prodimage">
        {{image[0]}}
</div>

or if you want to iterate over all the products ,, you need to make a nested ng-repeat

<div  ng-repeat="p in product">
        <div  ng-repeat="image in p.Prodimage">
        {{image[0]}}
        </div>
</div>

answered Jul 16, 2015 at 18:00

Ahmed Eid

1,1838 silver badges9 bronze badges

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

2 Comments

Shashank Vivek Over a year ago

Can i access each image path using : {{ product[0].Prodimage[0] }} and {{ product[0].Prodimage[1] }} and so on ?

Ahmed Eid Over a year ago

of course you can ,, you will access all the images of the first product

ajmajmajma · Accepted Answer · 2015-07-16 18:12:59Z

You could loop over it, becasue the outside is technically an array, and use $first for you example of wanting to only grab the first image. You could also use $index but running it through a function that checks the $index.

Fiddle here http://jsfiddle.net/HB7LU/15324/

I just re worked it to loop twice like so

<div  ng-repeat="prod in product">
    <div  ng-repeat="image in prod.Prodimage">
        <div ng-show="$first">
            {{image}}
        </div>
    </div>
</div>

then put a div inside the inner repeat that will only show if it's the first item. Again you could change that logic to show by index, or whatever you want. So if you know the index you could change that same logic to this -

see fiddle - http://jsfiddle.net/HB7LU/15332/

<div ng-show="checkIndex($index)"> << or whatever index you want
     {{image}}
</div>

and in the controller

 $scope.checkIndex = function(item){
    if(item === 0){
         return true;
    }else{
        return false;
    }
}

You just pass the index of the current item in the repeat and check it. I would recommend this logic over the Prodimage[0] logic so you are not hardcoding it into the html, so if you have to change the desired index, you change it in the controller, not template. The checkIndex is a quick example, you could change that to do whatever you want.

Agop · Accepted Answer · 2015-07-16 18:01:38Z

0

$scope.product[n].Prodimage is an array. So, you need to loop through your product array first, and then loop through the Prodimage array of each product:

<div ng-repeat="prod in product">
    <div ng-repeat="image in prod.Prodimage">
        {{ image }}
    </div>
</div>

Of course, you could also just access the nth image using something like:

<div ng-repeat="prod in product">
    {{ prod.Prodimage[0] }}
</div>

answered Jul 16, 2015 at 18:01

Agop

1,91717 silver badges23 bronze badges

Comments

ODelibalta · Accepted Answer · 2015-07-16 18:03:17Z

-1

Can you change your json to

"Prodimage":[ 
  { "loc": "./images/zoom/zoom1hi.jpg"}, 
  { "loc": "./images/zoom/zoom2hi.jpg"},
  { "loc": "./images/zoom/zoom3hi.jpg"}],

then your loop should work

<div  ng-repeat="image in product.Prodimage">
      {{image.loc}}
</div>

edited Jul 16, 2015 at 18:03

answered Jul 16, 2015 at 17:54

ODelibalta

2,2741 gold badge19 silver badges32 bronze badges

Collectives™ on Stack Overflow

access certain element of JSON in angular JS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related