populate nested ng-repeat with complex JSON

Question

I am trying to populate a td with multiple values in a single row with AngularJS's ng-repeat within another ng-repeat. I have it working until I try to access the 3rd nested object.

Object heicarchy:

object

-renewalUIs

--patentUI

---property.patentApplicationNumber (this is what I want to access)

Originally I began with a $.each function to loop through each object then I came across this thread Nested ng-repeat, and it explains that it is a more efficient and easier to loop through data. My issue is that I can access the properties of renewalUIs, but when when I add an extra object to my ng-repeat syntax, no data displays.

This code works:

<tr ng-repeat="transaction in $ctrl.transactionHistory">
    <td>
        <span ng-repeat="item in transaction.renewalUIs">{{item.renewalDueDate}}<br></span> 
    </td>
</tr>

This doesn't (but I need it to):

<tr ng-repeat="transaction in $ctrl.transactionHistory">
    <td>
        <span ng-repeat="item in transaction.renewalUIs.patentUI">{{item.patentApplicationNumber}}<br></span>   
    </td>
</tr>

Question

Why isn't my td populating with data from the patentUI object?

JSON

[  
   {  
      "renewalUIs":[  
         {  
            "patentUI":{  
               "patentApplicationNumber":"112233.4",
               "title":"A patent generated by createDummyPatentUiForSearchAddPatent()",
               "filingDate":1171411200000,
               "business":{  
                  "businessNumber":"Bo2",
                  "businessPin":3586,
                  "businessName":"Bodget and Scarper Patent Lawyers In",
                  "phoneNumber":"203141703",
                  "timezone":"(UTC-08:00) Pacific Time (US & Canada)",
                  "street":"Thats a real town name",
                  "city":"Cut and Shooper",
                  "zip":54321,
                  "isBillingAddressSame":true,
                  "billingStreet":"bStr",
                  "billingCity":"bCty",
                  "billingState":"bStt",
                  "billingZip":2222,
                  "id":1,
                  "version":48,
                  "usstate":"Texas"
               },
               "primaryApplicantName":"James Dean",
               "clientRef":"Electric Bananas",
               "shortTitle":"Jimaroo",
               "epoPatentStatus":"EMPTY",
               "lastRenewedDateExEpo":1485648000000,
               "renewalYear":7,
               "renewalStatus":"Renewal in place",
               "patentPublicationNumber":"112233.4+1",
               "notifications":null,
               "id":1,
               "version":17,
               "currentRenewalCost":1.11,
               "costBandEndDate":1501424837236,
               "renewalCostNextStage":1111111.11,
               "renewalDueDate":1488240000000,
               "filingDateUI":"Wed Feb 14, 2007",
               "notificationUIs":null,
               "costBandEndDateUI":"Sun Jul 30, 2017",
               "renewalDueDateUI":"Tue Feb 28, 2017",
               "lastRenewedDateExEpoUI":"Sun Jan 29, 2017"
            }
         },
         {  
            "patent":null,
            "activePaymentId":null,
            "fee":{  
               "renewal":null,
               "renewalFee_EUR":123.45,
               "extensionFee_EUR":234.56,
               "processingFee_USD":20.00,
               "expressFee_USD":230.00,
               "urgentFee_USD":0.00,
               "latePayPenalty_USD":0.00,
               "fxRate":0.88,
               "subTotal_USD":608.01,
               "id":2,
               "version":0
            },
            "certificate":{  
               "renewal":null,
               "certificateName":"Harry",
               "issueDate":1499778000000,
               "docPath":"hardcodedpdffolder/certificates/",
               "filename":"dummyCertificateNumber 1.pdf",
               "certificateTemplateId":"DemoCert#01",
               "id":1,
               "version":0,
               "url":"hardcodedpdffolder/certificates/dummyCertificateNumber 1.pdf"
            },
            "renewalYear":14,
            "renewalDueDate":1512086399000,
            "renewalPeriod":"Green",
            "renewalStatus":"Renewal in place",
            "renewalAttemptsMade":1,
            "id":2,
            "version":0,
            "renewalDueDateUI":"Thu Nov 30, 2017",
            "certificateUrl":"hardcodedpdffolder/certificates/dummyCertificateNumber 1.pdf",
            "patentUI":{  
               "patentApplicationNumber":"332211",
               "title":"A patent inspired by Despicable Me",
               "filingDate":1173657600000,
               "business":{  
                  "businessNumber":"Bo2",
                  "businessPin":3586,
                  "businessName":"Bodget and Scarper Patent Lawyers In",
                  "phoneNumber":"203141703",
                  "timezone":"(UTC-08:00) Pacific Time (US & Canada)",
                  "street":"Thats a real town name",
                  "city":"Cut and Shooper",
                  "zip":54321,
                  "isBillingAddressSame":true,
                  "billingStreet":"bStr",
                  "billingCity":"bCty",
                  "billingState":"bStt",
                  "billingZip":2222,
                  "id":1,
                  "version":48,
                  "usstate":"Texas"
               },
               "primaryApplicantName":"Paul Newman",
               "clientRef":"Gru",
               "shortTitle":"Steal the Moon !",
               "epoPatentStatus":"EMPTY",
               "lastRenewedDateExEpo":null,
               "renewalYear":-1,
               "renewalStatus":"Renewal in place",
               "patentPublicationNumber":"112233.4+2",
               "notifications":null,
               "id":2,
               "version":0,
               "currentRenewalCost":1.11,
               "costBandEndDate":1501424837240,
               "renewalCostNextStage":1111111.11,
               "renewalDueDate":1490914800000,
               "filingDateUI":"Mon Mar 12, 2007",
               "notificationUIs":null,
               "costBandEndDateUI":"Sun Jul 30, 2017",
               "renewalDueDateUI":"Fri Mar 31, 2017",
               "lastRenewedDateExEpoUI":""
            }
         }
      ]
   }
]

Because maybe renewalUIs is an array ? So probably u need to specify the index or use one more ng-repeat — Vivz, Jul 28 '17 at 14:16
Note that you don't have any JSON. You just have an object. JSON is a string format. — Heretic Monkey, Jul 28 '17 at 14:18
Can you post the JSON of a sample `transaction` you expect to be iterating through? It's entirely possible the structure doesn't match what you're trying to do. — whiterook6, Jul 28 '17 at 14:26
Added JSON, though a solution has been provided. Thank you everyone — Patrick McDermott, Jul 28 '17 at 14:33

score 1 · Accepted Answer · answered Jul 28 '17 at 14:27

1

Is patentUI a property of each renewalUI ?

If it's the case ng-repeat won't work properly. You can use the directive ng-repeat to iterate over collection objects (like arrays are).

The ngRepeat directive instantiates a template once per item from a collection.

https://docs.angularjs.org/api/ng/directive/ngRepeat

So the code would work could be

<tr ng-repeat="transaction in $ctrl.transactionHistory">
    <td>
        <span ng-repeat="item in transaction.renewalUIs">{{item.patentUI.patentApplicationNumber}}<br></span>   
    </td>
</tr>

answered Jul 28 '17 at 14:27

jmtalarn

1,513
1
13
16

Thank you @jmltalarn. There is one renewalUIs, two patentUI – Patrick McDermott Jul 28 '17 at 14:33
renewalUIs is an array so is iterable. The object inside this array has a property parentUI and contains an object, is not a properly array and in that case it won't be iterated. – jmtalarn Jul 28 '17 at 14:39
Appreciate the feedback – Patrick McDermott Jul 28 '17 at 14:49

populate nested ng-repeat with complex JSON

1 Answers1