current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

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>
share|improve this question
1  
jobs is an array. try jobs[0].name – Rajesh Jul 22 at 12:11
    
Check this jsfiddle.net/nyfcp3wa – Arif Jul 22 at 12:13
up vote 0 down vote

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

share|improve this answer
up vote 0 down vote

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>
share|improve this answer
1  
thank you very much – scroobius Jul 22 at 12:20
    
No problem! Please accept my answer if it was what you needed :) – FvB Jul 22 at 12:22
1  
This doesnt display all job names, only the first name for the first customer, and the second job name for the second customer – Chris Newman Jul 22 at 12:24
    
how do i access the second element in the array – scroobius Jul 22 at 12:24
    
Good point Chris Newman, I edited my answer to reflect the changes – FvB Jul 22 at 12:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.