Help please limit the output of the number of items in the list to two.

jsfiddle

html:

<div ng-app="newsFeed"> <div ng-controller="newsFeedController"> <ul class="news_list"> <li ng-repeat="newsItem in news | limitTo:2"> <div class="title">{{ newsItem.title }}</div> </li> </ul> </div> </div>

js:

 var newsFeed = angular.module('newsFeed', []); newsFeed.factory('initDataService', function(){ return{ initData:{ "values":{ "id1": {"title":"Lorem ipsum dolor sit.", "poster": "1.jpg", "description": "Lorem ipsum dolor sit amet, consectetur adssumenda expedita molestias tenetur, quam nostrum nisi praesentium necessitatibus doloribus!"}, "id2": {"title":"Nobis delectus deleniti, amet.", "poster": "2.jpg", "description": "Fuga, porro, nemo. Ut, nisi reicieum tempore."}, "id3": {"title":"Sequi alias, cur! Sapiente sit esse ipsa! Doloremque voluptates pariatur non eaque laborum."}, "id4": {"title":"Odit tempora temporicia eius voluptates magnam quam similique, accusantium consequatur."}, "id5": {"title":"Recusandae possimus qui tempore."}, "id6": {"title":"Placeat enim, facilis molestiae.", "poster": "6.jpg", "description": "Consectetur aperiam nam esse earum, repudiandae, ta impedit! Illum, assumenda?"}, } } }; }) var newsFeedModule = angular.module('newsFeed'); newsFeedModule.controller('newsFeedController', function($scope, initDataService) { $scope.posterWidth = 100; $scope.posterHeight = 60; $scope.news = initDataService.initData.values; });
  • and what's the problem? And, I saw, - change the "values" on the array and it will work - Grundy
  • So? jsfiddle.net/q209o0gm/19 did not work - cyklop77
  • naturally does not work, the syntax error is the same - Grundy
  • ahh .. well, this is all the data you need to shovel. and if their million lines will be? - cyklop77
  • and they are really going to manually? - Grundy

2 answers 2

The limitTo filter works only with arrays. Since in this case an object is used, it returns it.

The solution can be many: from filtering in the controller before output as needed, to writing your own filter.

The filter might look like this:

 filter('objectProplimitTo', function() { return function(obj, count) { var res = []; for (var p in obj) { if (res.length == count) return res; res.push(obj[p]); } } return res; })

Working example:

 var newsFeed = angular.module('newsFeed', []); newsFeed.factory('initDataService', function() { return { initData: { "values": { "id1": { "title": "Lorem ipsum dolor sit.", "poster": "1.jpg", "description": "Lorem ipsum dolor sit amet, consectetur adssumenda expedita molestias tenetur, quam nostrum nisi praesentium necessitatibus doloribus!" }, "id2": { "title": "Nobis delectus deleniti, amet.", "poster": "2.jpg", "description": "Fuga, porro, nemo. Ut, nisi reicieum tempore." }, "id3": { "title": "Sequi alias, cur! Sapiente sit esse ipsa! Doloremque voluptates pariatur non eaque laborum." }, "id4": { "title": "Odit tempora temporicia eius voluptates magnam quam similique, accusantium consequatur." }, "id5": { "title": "Recusandae possimus qui tempore." }, "id6": { "title": "Placeat enim, facilis molestiae.", "poster": "6.jpg", "description": "Consectetur aperiam nam esse earum, repudiandae, ta impedit! Illum, assumenda?" }, } } }; }) var newsFeedModule = angular.module('newsFeed'); newsFeedModule.controller('newsFeedController', function($scope, initDataService) { $scope.posterWidth = 100; $scope.posterHeight = 60; $scope.news = initDataService.initData.values; }).filter('objectProplimitTo', function() { return function(obj, count) { var res = []; for (var p in obj) { if (res.length == count) return res; res.push(obj[p]); } } return res; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <div ng-app="newsFeed"> <div ng-controller="newsFeedController"> <ul class="news_list"> <li ng-repeat="newsItem in news | objectProplimitTo:2"> <div class="title">{{ newsItem.title }}</div> </li> </ul> </div> </div>

    Not the best solution, but it will work as it should:

     $scope.news=[ {"title":initDataService.initData.values[0].title}, {"title":initDataService.initData.values[1].title} ];

    If you need more, then loop on initDataService.initData.values .

    In my opinion, the best will be to create a method in your service that returns 2 elements, and pull only 2 from the server.