Angularjs Ngrepeat Not Respecting Limitto Filter

I'm using ng-repeat on a list item to display available supermarket items. The items are retrieved using $http as JSON and stored in $scope.items, and ng-repeat is working fine to

Solution 1:

I have found the problem.

It seems, if you json_encode an ArrayIterator in PHP, it will encode it as an object within an object instead of an object in an array. This seems to cause the issue with the limitTo (and other) filters in Angular not working properly.

After converting the ArrayIterator to a normal PHP array and running json_encode, the limiting works absolutely fine.

Solution 2:

Your interpolation syntax is wrong. You have square brackets between your curly braces.

<imgsrc="{[{ choice.ImagePath }]}"class="img-rounded" /> {[{ choice.Name }]} <strong>{[{ choice.Price }]}</strong>

needs to become

<imgsrc="{{ choice.ImagePath }}"class="img-rounded" /> {{ choice.Name }} <strong>{{ choice.Price }}</strong>

After I fix that, it works for me in this codepen.