Angular: can't access array in object

Question

im trying to access to array in object, but no success. read other posts and answers here, still, cant do it.

this is my obj: activeInvoice

balance_due:
"-72.26"
customer_id
:
"4"
customerpm_id
:
"1244"
date
:
"2017-03-02 04:23:18"
id:
"10334"
invoice_data:
"{"subtotal":72.26,"items":[{"storeid":"148","title":"MONTEBELLO","qty":1,"price":"1.9900","type":"payment"},{"storeid":"149","title":"Gold Elements - Store","qty":1,"price":"66.2900","type":"payment"},{"storeid":"860","title":"Gold Elements - Cart","qty":1,"price":"1.9900","type":"payment"},{"storeid":"1805","title":"Repeat the Heat 2","qty":1,"price":"1.9900","type":"payment"},{"storeid":"2867","title":"office","qty":1,"price":"0.0000","type":"payment"}]}"
invoice_type
:
"monthly_subscription"
status
:
"0"

this is my HTML

<table class="table dark">
  <thead>
  <tr>
    <th>#</th>
    <th>Item</th>
    <th>QTY</th>
    <th>Price (USD)</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="invoice in activeInvoice.invoice_data">
    <td class="text-center"></td>
    <td class="text-center" ng-repeat="data in invoice.items">{{data.title}}</td>
    <td class="text-center"></td>
    <td class="text-center"></td>
  </tr>
  </tbody>
</table>

trying to access invoice_data items, and im getting [ngRepeat:dupes] Duplicates in a repeater error tried with track by, no success. thank you

Answer 1

I think your problem is you have some record that are the same... so you need to track your repeat by some unique field... something like:

<tr ng-repeat="invoice in activeInvoice.invoice_data track by $index">
  <td class="text-center"></td>
  <td class="text-center" ng-repeat="data in invoice.items track by item.storeid">{{data.title}}</td>
  <td class="text-center"></td>
  <td class="text-center"></td>
</tr>

IF YOUR STOREID IS A UNIQUE PK (so you can't have 2 storeid equal) ...