accessing nested array in nested object in angular js

Question

I am using angularjs 1.I have a pretty complex json object with a lot of nesting . I want to use ng-repeat on a json to access a nested array.

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

i am trying to access the name property in jobs i have tried the following

<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

Because customer.jobs is an array, you must access it using and index or key.

In your example, the way to do this would be using customer.jobs[0].name.

The resulting HTML would like this:

<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

It's an array of customers, with each containing an array of jobs. As such, you need a double repeater to cycle through the first AND second array.

UPDATE 2

I figured you might want a 'card' per job a customer has, that code would be as follows:

<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

You did not explicitly say that your array is called customers, so I am assuming that it is.

You have an array of customers, and each customer has one or more jobs. If you want to display the name of ALL jobs for each customer, you need to use nested ng-repeats. I'm not sure which part of your UI you want to repeat but I'm just going with the '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: added h1 customer name, and changed job name to h2, to show that each job under each customer is displayed