Accessing an array within an array (ng-repeat) - arrays

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?

Answer 1

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>