Accessing an array within an array (ng-repeat)

Question

I have a data structure like this:

[
   {firstName: "John",
    secondName: "Smith",
    children: ["Fred", "Hannah"]
   },
   {firstName: "Daniel",
    secondName: "Evans",
    children: ["Maggie", "Eddie", "Maria"]
   }
]

I want to use ng-repeat to return the CHILDREN of each person object, in a continuous list.

Like so:

<ul>    
    <li>Fred</li>
    <li>Hannah</li>
    <li>Maggie</li>
    <li>Eddie</li>
    <li>Maria</li>
</ul>

Can anyone help?

That is an array of objects, which has an array, try thinking of it like that and post some code on how you tried to access it. — Train
– Train, Commented Feb 25, 2016 at 21:07
Are you not outputting the parent? Also what have you tried? — charlietfl
– charlietfl, Commented Feb 25, 2016 at 21:14

paul · Accepted Answer · 2016-02-25 21:44:16Z

2

You could reduce your data structure before presenting it to the ng-repeat.

var app = angular.module('myApp', [
  'my.controllers'
]);

var controllers = angular.module('my.controllers', []);

controllers.controller('MyController', function($scope) {
  var people = [{
    firstName: "John",
    secondName: "Smith",
    children: ["Fred", "Hannah"]
  }, {
    firstName: "Daniel",
    secondName: "Evans",
    children: ["Maggie", "Eddie", "Maria"]
  }, {
   firstName:"Childless",
   secondName: "Parent"
  },
  { 
   firstName:"Jeff",
   secondName: "Pasty",
   children: ["Mike"]
  }];

  $scope.allChildren = people.reduce(function(a, b) { return a.concat(b.children) },[]);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyController">
    <div ng-repeat='child in allChildren'>{{ child }}</div>
  </div>
</div>

edited Feb 25, 2016 at 21:44

answered Feb 25, 2016 at 21:34

paul

22.1k1 gold badge56 silver badges54 bronze badges

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

4 Comments

charlietfl Over a year ago

small bug ... add another parent with children. reduce throws error since returning an array that doesn't have children property

charlietfl Over a year ago

could do people.reduce(function(a, b) { return a.concat(b.children) },[]);

paul Over a year ago

@charlietfl Thankyou for pointing that out, very helpful, have edited to include your sugegstion

Paulos3000 Over a year ago

That's it! Can't believe it didn't occur to me to store it in a new variable. Great advice - thanks to both.

Collectives™ on Stack Overflow

Accessing an array within an array (ng-repeat)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related