How to access objects in array using ng-repeat

Question

I have data like below

{
"_id": ObjectId("57b2fb48d69e8cf00fd32036"),
"wName": "Sara",
"wType": "Shared",
"userId": "57443657ee5b5ccc30c4e6f8",
"productsInWishlists": [
   {
    "Product_Id": "b7ad3650-b752-4a93-85a2-a54a309c5e9b",
    "Product_name": "AmazonBasics BTV4 Micro Wireless Bluetooth Speaker (Blue)",
    "Brand": "AmazonBasics",
    "Color": "Blue",
    "Image": "http://ecx.images-amazon.com/images/I/414G8rQROwL._SX300_QL70_.jpg",
    "Price": "999.00",
    "Description": "",
    "Url": "http://www.amazon.in/dp/B00LLJ5BPI?psc=1",
    "userId": ObjectId("57443657ee5b5ccc30c4e6f8") 
   },
   {
    "Product_Id": "42f350b1-6d63-4f17-9dbc-bea6ae1abe24",
    "Product_name": "S460-BLUE Bluetooth Headphone With FM and Calling",
    "Brand": "Acid Eye",
    "Color": "",
    "Image": "http://ecx.images-amazon.com/images/I/41XZKFBo19L._SY300_QL70_.jpg",
    "Price": "999.00",
    "Description": "High bass bluetooth headphone with calling facility , inbuilt FM & memory card slot (expandable upto 32 GB) with Good battery backup",
    "Url": "http://www.amazon.in/dp/B01GFB0638?psc=1",
    "userId": ObjectId("57443657ee5b5ccc30c4e6f8") 
   } 
 ] 
}

I am getting above result in vm.rslt1. Now I want to access the objects present in productsInWishlists.

<md-card class="md-whiteframe-3dp" ng-repeat="product in vm.rslt1" flex="40" style="max-width: 50%;">
  <div layout="row" layout-align="end center"> 
    <md-button ng-click="deletePrdct(vm.rslt1[$index]._id, product.Product_Id, $index)" aria-label="Delete" class="md-icon-button md-mini">
      <md-icon md-svg-icon="/assets/icons/fonts/delete.svg" aria-label="Delete"></md-icon>
        <md-tooltip md-direction="bottom">Remove from Wishlist</md-tooltip>
    </md-button>
  </div>
  <img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here" style="margin-left:80px">

  <div style="margin-left:15px">
    <h2>&#8377;{{ product.Price }}</h2>
  </div>

  <div style="margin-left:15px">
    <h2>{{product.Product_name | characters:30}}</h2>
  </div>

  <md-card-content>
    <p align="justify" style="text-indent: 30px">
       {{ product.Description | characters:150}}
    </p>
  </md-card-content>
</md-card>

If I used product.productsInWishlists.Product._Id I got id of that product and so on.Please help me solve this issue.

karthick Ramanathan · Accepted Answer · 2016-08-17 10:48:32Z

2

vm.rslt1 is a Object use this way

<md-card class="md-whiteframe-3dp" ng-repeat="product in vm.rslt1.productsInWishlists" flex="40" style="max-width: 50%;">
  <div layout="row" layout-align="end center"> 

.....

</md-card>

if vm.rslt1 is a Array use this way

    <md-card class="md-whiteframe-3dp" ng-repeat="product in vm.rslt1" flex="40" style="max-width: 50%;">
    <div layout="row" layout-align="end center">

        <div ng-repeat="product in product.productsInWishlists">
            ...
        </div>
        .....
</md-card>

answered Aug 17, 2016 at 10:48

karthick Ramanathan

9107 silver badges11 bronze badges

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

Comments

illeb · Accepted Answer · 2016-08-17 10:39:47Z

1

Just add another ng-repeat like so:

<md-card-content>
  <p align="justify" style="text-indent: 30px">
     {{ product.Description | characters:150}}
  </p>
</md-card-content>
<!-- your previous code.. -->

<!-- add a sub ng-repeat to cycle the internal array -->
<div ng-repeat="element in product.productsInWishlists | track by $index"> 
   <span>{{element.Product_Id}}</span>
   <!--and so on..-->
</div>

answered Aug 17, 2016 at 10:39

illeb

2,9471 gold badge23 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to access objects in array using ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related