füllen verschachtelten ng-repeat mit komplexen JSON

Question

Ich versuche, eine td mit mehreren Werten in einer einzigen Zeile mit AngularJS ng-Wiederholung innerhalb einer anderen ng-Wiederholung zu füllen. Ich habe es funktioniert, bis ich versuche, auf das dritte verschachtelte Objekt zuzugreifen.

Object heicarchy:

object

-renewalUIs

--patentUI

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

ursprünglich begann ich mit einem $.each Funktion durch jedes Objekt Schleife dann kam ich auf dieses Gewinde 012.343., und es erklärt, dass es effizienter und einfacher ist, Daten zu durchlaufen. Mein Problem ist, dass ich auf die Eigenschaften von renewalUIs zugreifen kann, aber wenn ich ein zusätzliches Objekt zu meiner ng-repeat-Syntax hinzufüge, werden keine Daten angezeigt.

Dieser Code funktioniert:

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

Dies gilt nicht (aber ich muss es):

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

Frage

Warum ist nicht meine td mit Daten bevölkern vom Objekt patentUI?

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":"" 
      } 
     } 
     ] 
    } 
] 

Answer 1

Ist patentUI eine Eigenschaft jedes renewalUI?

Wenn es der Fall ist, wird ng-repeat nicht richtig funktionieren. Sie können die Anweisung ng-repeat verwenden, um über Sammlungsobjekte (wie Arrays) zu iterieren.

Die ngRepeat-Direktive instanziiert eine Vorlage einmal pro Element aus einer Sammlung.

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

könnte So würde der Code arbeiten

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