I pushed few array of objects into an empty array which I then want to display on the html.
$scope.displaypersons = [
[{name: "abc"}],
[{name: "pqr"},{name: "lmn"},{name: "rst"}],
[{name: "uvw"},{name: "xyz"}]
]
In html
<div ng-repeat="person in displaypersons">
{{person}}
<!-- {{person.name}} doesn't work -->
</div>
But after iterating, I'm getting this way:.
[{"name": "abc"}]
[{"name": "pqr"},{"name": "lmn"},{"name": "rst"}]
[{"name": "uvw"},{"name": "xyz"}]
You have a 2-dimensional array. Angular will only iterate the 1st dimension. You need person[i].name to get that attribute.
Or try:
<div ng-repeat="persons in displaypersons">
<div ng-repeat="person in persons">
{{person.name}}
</div>
</div>
You have a 2-D array, you need to nest your ngRepeats in order to access the objects.
<div ng-repeat="personGroup in displaypersons">
<div ng-repeat="person in personGroup">
{{person.name}}
</div>
</div>
You can create a custom filter to turn your 2D array into a flat array.
angular.module('myApp').filter("flatten", function() {
function flatten (arr) {
return arr.reduce(function(a, b) {return a.concat(b)});
};
return flatten;
});
HTML
<div ng-repeat="person in displaypersons | flatten">
{{person.name}}
</div>
