角度jsのネストされたオブジェクトのネストされた配列にアクセス

Question

私はangularjsを使用しています。1.かなり複雑なjsonオブジェクトがたくさんあります。ネストされた配列にアクセスするために、jsonでng-repeatを使用したいと思います。

[{ 
    "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" 
    }] 
}]; 

私はcustomer.jobsが配列であるので、あなたが使用して、インデックスまたはキーそれにアクセスする必要があり、次の

<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

を試してみましたが、仕事でnameプロパティにアクセスしようとしています。

例では、これを行う方法はcustomer.jobs [0] .nameを使用することです。

<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

それは、各ジョブの配列を含むと、顧客の配列です：

結果のHTMLはこれをしたいと思います。そのため、第1および第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

あなたが明示的に使用するアレイであることを言わなかった：私はあなたが以下のように、顧客が持っている、そのコードは次のようになりジョブごとに「カード」をお勧めします考え出し

UPDATE 2

私はそれがあると仮定しています。

あなたには顧客の配列があり、各顧客には1つ以上の仕事があります。顧客ごとにすべてのジョブの名前を表示する場合は、ネストされたng-repeatsを使用する必要があります。あなたのUIのどの部分を繰り返したいのか分かりませんが、私はちょうど 'card-hero' divを使っています。

<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：各顧客の下に各ジョブを