AngularJs working with nested arrays within objects

Question

I'm trying to display information from child and parent data within a json object. Below is my data:

$scope.electionDetails = {
  id : 1,
  election_type: "CityCouncil",
  election_name: "City A City Council Elections
  candidates : [{
               id: 1,
               election_id: 1,
               position_id: 1,
               first_name: "John",
               last_name: "Doe"
               },
               {
               id:2,
               election_id:1,
               position_id:1,
               first_name: "Jane",
               last_name: "Doe"
               },
               {
               id:3,
               election_id:1,
               position_id:2,
               first_name: "Mike",
               last_name: "Doe" 
               },
               {
               id:4,
               election_id:1,
               position_id:2,
               first_name: "Mary",
               last_name: "Doe"
               }],
 positions : [{
             id:1,
             election_id: 1,
             position: "Seat 1"
             },
             {
             id:2,
             election_id:1,
             position: "Seat 2"
             }]

}

I want to display this data grouped, using angular like so:

City A City Council Elections

Seat 1

John Doe
Jane Doe

Seat 2

Mike Doe
Mary Doe

What is your question? Have you made an attempt to display the data? If so, can you post it here? — Oscar Gonzalez
– Oscar Gonzalez, Commented Apr 6, 2016 at 15:55
I haven't attempted. I know how to use ng-repeat just not in a way that will group this data correctly. — aqwright31
– aqwright31, Commented Apr 6, 2016 at 16:00
I have a solution for you. It is also worth noting that you are missing an ending " and , at the end of the "election_name" property in your code you have posted — mhodges
– mhodges, Commented Apr 6, 2016 at 16:04

mhodges · Accepted Answer · 2016-04-06 16:01:05Z

1

Here you go. The HTML structure may not be exactly what you want, so you can change up what tags you use, but this is the basic idea using ng-if and ng-repeat to create lists of candidates for a given seat.

DEMO

answered Apr 6, 2016 at 16:01

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Oscar Gonzalez Over a year ago

This is correct. You can also use the 'filter' filter, instead of ng-if docs.angularjs.org/api/ng/filter/filter

mhodges Over a year ago

Agreed. If it were my application I would use filter, I was just trying to keep it as simple as possible for the OP. Great suggestion, though!

aqwright31 Over a year ago

Thanks! I think I could I apply this with a filter now.

Collectives™ on Stack Overflow

AngularJs working with nested arrays within objects

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related