доступ к вложенному массиву в вложенном объекте в угловом js

Question

Я использую angularjs 1. У меня довольно сложный объект json с большим количеством гнездования. Я хочу использовать ng-repeat в json для доступа к вложенному массиву.

[{ 
    "information": { 
    "name": "simdi jinkins", 
    "phone": "08037775692", 
    "email": "sim04ful@gmail", 
    "whatsapp": "8349493420", 
    "residential": "gwarinpa", 
    "office": "dansarari plaza" 
    }, 
    "jobs": [{ 
    "name": "jeans and shirt", 
    "measurement": { 
     "shoulder": "34", 
     "waist": "44", 
     "neck": "86", 
     "front": "42", 
     "length": "33", 
     "boost": "80", 
     "cap": "30", 
     "sleeves": "12", 
     "tommy": "30", 
     "thigh": "30", 
     "chest": "34", 
     "back": "40" 
    }, 
    "account": { 
     "method": "cheque", 
     "amount": "2334", 
     "advance": "3945", 
     "date": "2016-07-22T09:54:06.395Z" 
    }, 
    "date": { 
     "incharge": "2016-07-22T09:54:06.395Z", 
     "collection": "2016-07-22T09:54:06.395Z" 
    }, 
    "style": "english", 
    "material": "our" 
    }, { 
    "name": "skirt and blouse", 
    "measurement": { 
     "shoulder": "35", 
     "waist": "45", 
     "neck": "85", 
     "front": "52", 
     "length": "53", 
     "boost": "85", 
     "cap": "50", 
     "sleeves": "52", 
     "tommy": "50", 
     "thigh": "35", 
     "chest": "35", 
     "back": "50" 
    }, 
    "account": { 
     "method": "cheque", 
     "amount": "2334", 
     "advance": "5045", 
     "date": "2016-07-22T09:54:06.395Z" 
    }, 
    "date": { 
     "incharge": "2016-07-22T09:54:06.395Z", 
     "collection": "2016-07-22T09:54:06.395Z" 
    }, 
    "style": "native", 
    "material": "bought" 
    }] 
}, { 
    "information": { 
    "name": "Paula Odama", 
    "phone": "08034698692", 
    "email": "paulyd@gmail", 
    "whatsapp": "8348733420", 
    "residential": "inpa", 
    "office": "dansaza" 
    }, 
    "jobs": [{ 
    "name": "gown", 
    "measurement": { 
     "shoulder": "74", 
     "waist": "44", 
     "neck": "76", 
     "front": "42", 
     "length": "73", 
     "boost": "80", 
     "cap": "37", 
     "sleeves": "72", 
     "tommy": "30", 
     "thigh": "70", 
     "chest": "37", 
     "back": "70" 
    }, 
    "account": { 
     "method": "cheque", 
     "amount": "2334", 
     "advance": "3945", 
     "date": "2016-07-22T09:54:06.395Z" 
    }, 
    "date": { 
     "incharge": "2016-07-22T09:54:06.395Z", 
     "collection": "2016-07-22T09:54:06.395Z" 
    }, 
    "style": "english", 
    "material": "our" 
    }, { 
    "name": "robes", 
    "measurement": { 
     "shoulder": "35", 
     "waist": "45", 
     "neck": "85", 
     "front": "52", 
     "length": "53", 
     "boost": "85", 
     "cap": "50", 
     "sleeves": "52", 
     "tommy": "50", 
     "thigh": "35", 
     "chest": "35", 
     "back": "50" 
    }, 
    "account": { 
     "method": "cheque", 
     "amount": "2334", 
     "advance": "5045", 
     "date": "2016-07-22T09:54:06.395Z" 
    }, 
    "date": { 
     "incharge": "2016-07-22T09:54:06.395Z", 
     "collection": "2016-07-22T09:54:06.395Z" 
    }, 
    "style": "native", 
    "material": "bought" 
    }] 
}]; 

я пытаюсь получить доступ к свойству имя в работах я попытался следующие

<div ng-repeat="customer in customers" class="card rich-card" z="2"> 
    <div class="card-hero" style=""> 
    <h1>{{customer.jobs.name}} <span>{{}}</span> </h1> 
    </div> 
    <div class="divider"></div> 
    <div class="card-footer"> 
    <button class="button flat">View</button> 
    <button class="button flat color-orange-500">Explore</button> 
    </div> 
</div> 

Answer 1

Поскольку customer.jobs является массивом, то вы должны получить к нему доступ, используя и индекс или ключ.

В вашем примере способ использования этого будет использовать customer.jobs [0] .name.

Полученный HTML хотел бы это:

<div ng-repeat="customer in customers" class="card rich-card" z="2"> 
    <div class="card-hero" style=""> 
     <div data-ng-repeat="job in customer.jobs"> 
      <h1>{{job.name}} <span>{{}}</span> </h1> 
     </div> 
    </div> 
    <div class="divider"></div> 
    <div class="card-footer"> 
     <button class="button flat">View</button> 
     <button class="button flat color-orange-500">Explore</button> 
    </div> 
</div> 

UPDATE

Это массив клиентов, с каждый из которых содержит множество рабочих мест. Таким образом, вам нужен двойной повторитель для циклического прохождения первого и второго массивов.

UPDATE 2

Я понял, что вы могли бы хотеть «карту» за работу клиент имеет, что код будет выглядеть следующим образом:

<div data-ng-repeat="customer in customers"> 
    <div ng-repeat="job in customer.jobs" class="card rich-card" z="2"> 
     <div class="card-hero" style=""> 
      <h1>{{job.name}} <span>{{}}</span> </h1> 
     </div> 
     <div class="divider"></div> 
     <div class="card-footer"> 
      <button class="button flat">View</button> 
      <button class="button flat color-orange-500">Explore</button> 
     </div> 
    </div> 
</div> 

Answer 2

Вы прямо не сказать, что ваш массив так что я предполагаю, что это так.

У вас есть множество клиентов, и у каждого клиента есть одно или несколько заданий. Если вы хотите отобразить имя ВСЕ заданий для каждого клиента, вам нужно использовать вложенные ng-повторы. Я не уверен, какую часть вашего пользовательского интерфейса вы хотите повторить, но я просто собираюсь с div «card-hero».

<div ng-repeat="customer in customers" class="card rich-card" z="2"> 
    <h1>{{customer.information.name}}</h1> 
    <div ng-repeat="job in customer.jobs" class="card-hero" style=""> 
    <h2>{{job.name}} <span>{{}}</span> </h2> 
    </div> 
    <div class="divider"></div> 
    <div class="card-footer"> 
    <button class="button flat">View</button> 
    <button class="button flat color-orange-500">Explore</button> 
    </div> 
</div> 

EDIT: добавлены h1 имя клиента, и изменил имя задания на h2, чтобы показать, что каждая работа под каждого клиента отображается