CODEWITHSUNDEEP
jsonangularjs
Shashank Vivek
Shashank Vivek

Reputation: 17514

access certain element of JSON in angular JS

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

Upvotes: 1

Views: 642

Answers (4)

ajmajmajma
ajmajmajma

Reputation: 14226

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.

Upvotes: 1

ODelibalta
ODelibalta

Reputation: 2254

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>

Upvotes: -1

Agop
Agop

Reputation: 1917

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

Upvotes: 0

Ahmed Eid
Ahmed Eid

Reputation: 1183

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>

Upvotes: 1

Related Questions