difficulty running ng-repeat for an array of objects

Question

I have a block of html code which I would like to repeat for each object in an array of objects, where each object would populate a section like such...

<!--  -->
<!-- Future appointments section -->
<!--  -->
<div class="future-appointments-meta-holder" ng-repeat="person in vm.myData">

 <div class="future-appointments-holder">
   <div class="future-appointments-info-holder">
     <p class="future-appointments-info-holder-text">
       {{vm.myData[person].activeReferralsType}}
     </p>
     <p class="future-appointments-info-holder-text-secondary">
       {{vm.myData[person].activeReferralsDate}} | {{vm.myData[person].activeReferralsTime}}
     </p>
   </div>

   <div class="future-appointments-info-holder-mid">
     <p class="future-appointments-info-holder-text-col2">
       <b>{{vm.myData[person].referredFromName}}</b>
     </p>
     <p class="future-appointments-info-holder-text-col2">
       {{vm.myData[person].referredFromAddressFacilityName}}
     </p>
     <p class="future-appointments-info-holder-text-col2">
       {{vm.myData[person].referredFromAddressFacilityAddressLineOne}}
     </p>
     <p class="future-appointments-info-holder-text-col2">
       {{vm.myData[person].referredFromAddressFacilityAddressLineTwo}}, {{vm.myData[person].referredFromAddressFacilityAddressState}} {{vm.myData[person].referredFromAddressFacilityAddressZip}}
     </p>
   </div>

   <div class="future-appointments-info-holder-right2">
     <p class="future-appointments-info-holder-text-col2">
       PUBLIC | {{vm.myData[person].referredFromPublicNum}}
     </p>
     <p class="future-appointments-info-holder-text-col2">
       BACK | {{vm.myData[person].referredFromBackNum}}
     </p>
     <p class="future-appointments-info-holder-text-col2">
       DOCTOR | {{vm.myData[person].referredFromDocNum}}
     </p>
   </div>
 </div>
 <div class="horizontal-rule">

 </div>
</div>
<!--  -->
<!-- END future appointments section -->
<!--  -->

My dataset looks something like this

vm.myData = [
          {
            "alert": "2"
            , "activeReferralsType" : "new patient diabetic eye exam"
            , "activeReferralsDate" : "September 30, 2017"
            , "activeReferralsTime" : "2:00PM"
            , "referredFromName" : "Karen Rush, MD"
            , "referredFromAddressFacilityName" : "Random Family Practice"
            , "referredFromAddressFacilityAddressLineOne" : "1108 Cedar Road"
            , "referredFromAddressFacilityAddressLineTwo" : "Chesapeake"
            , "referredFromAddressFacilityAddressState" : "VA"
            , "referredFromAddressFacilityAddressZip" : "90210"
            , "referredFromPublicNum" : "218.202.4561"
            , "referredFromBackNum" : "218.556.4568"
            , "referredFromDocNum" : "218.555.5555"
            , "referredToName" : "Karen Rush, MD"
            , "referredToAddressFacilityName" : "Random Family Practice"
            , "referredToAddressFacilityAddressLineOne" : "1108 Cedar Road"
            , "referredToAddressFacilityAddressLineTwo" : "Chesapeake"
            , "referredToAddressFacilityAddressState" : "VA"
            , "referredToAddressFacilityAddressZip" : "90210"
            , "referredToPublicNum" : "218.202.4561"
            , "referredToBackNum" : "218.556.4568"
            , "referredToDocNum" : "218.555.5555"

          },
          {
            "alert": "3"
            , "activeReferralsType" : "new patient diabetic eye exam"
            , "activeReferralsDate" : "Ontober 22, 2017"
            , "activeReferralsTime" : "1:00PM"
            , "referredFromName" : "Mark Spencer, MD"
            , "referredFromAddressFacilityName" : "Medical Life Practice"
            , "referredFromAddressFacilityAddressLineOne" : "666 Road Way"
            , "referredFromAddressFacilityAddressLineTwo" : "Houston"
            , "referredFromAddressFacilityAddressState" : "TX"
            , "referredFromAddressFacilityAddressZip" : "39405"
            , "referredFromPublicNum" : "218.900.3333"
            , "referredFromBackNum" : "218.111.0000"
            , "referredFromDocNum" : "218.445.2135"
            , "referredToName" : "Gul Dukat, MD"
            , "referredToAddressFacilityName" : "St. Vincent Hospital"
            , "referredToAddressFacilityAddressLineOne" : "1 Hosipital Road"
            , "referredToAddressFacilityAddressLineTwo" : "New York"
            , "referredToAddressFacilityAddressState" : "NY"
            , "referredToAddressFacilityAddressZip" : "33330"
            , "referredToPublicNum" : "218.552.2131"
            , "referredToBackNum" : "218.555.1234"
            , "referredToDocNum" : "218.555.5555"

          }
        ];

I have read through the documentation and looked at this, this, and this stack questions, but I simply do not understand how the ng-repeat works. Do I just have a syntax issue? or is it a wider misunderstanding of the concept?

also, you should use a track by statement for you ng-repeats for performance. — alphapilgrim
– alphapilgrim, Commented Nov 23, 2016 at 14:08

taguenizy · Accepted Answer · 2016-11-23 14:10:09Z

1

Just use person instead of vm.myData[person] inside your ng-repeat div.
Essentially the ng-repeat will repeat whatever you have inside that HTML element for each element of the array myData where you can use each element as person where you defined in ng-repeat="person in vm.myData"

edited Nov 23, 2016 at 14:10

answered Nov 23, 2016 at 14:05

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

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

Comments

Evans Murithi · Accepted Answer · 2016-11-23 14:06:16Z

1

ng-repeat attribute is like a for loop. In your situation vm.myData is an array of objects. Therefore doing <div ng-repeat="person in vm.myData"> will make you access each object using person. So, now you can do {{ person.activeReferralsType }} as an example.

Hope this helps.

answered Nov 23, 2016 at 14:06

Evans Murithi

3,2771 gold badge24 silver badges26 bronze badges

Collectives™ on Stack Overflow

difficulty running ng-repeat for an array of objects

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related