angularjs - Angular - Loop through unique items from REST data -
i trying iterate through unique "modules" received through rest services. there multiple href's associated single module.
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script type="text/javascript"> var moduleserviceurl = _sppagecontextinfo.webabsoluteurl + "/_api/lists/getbytitle('pages')/items?$select=id,title,fileref,modules"; var appvar = angular.module('listapp', []); appvar.controller('controller1', function ($scope, $http) { $http({ method: 'get', url: moduleserviceurl, headers: { "accept": "application/json;odata=verbose" } }).success(function (data, status, headers, config) { $scope.items = data.d.results; }); }) </script> </head> <body> <hr /> <div ng-app="listapp"> <div id="app1" ng-controller="controller1"> <div ng-repeat="item in items" ng-if="item.modules"> <b><p>{{item.modules}}</p></b> <p class="kbrelatedarticle" style="padding-left:10px"><a href="{{item.fileref}}">{{item.title}}</a></p> </div> </div> </div> </body> </html> 
my goal have links under same module heading instead of having repeated module headings.
my initial thought have nested ng-repeat in outer ng-repeat loop through unique modules , inner generate links related module.
you can create object modules key , array of items value so
$scope.modules = data.d.results.reduce((modules, item) => { if (item.modules) { if (array.isarray(modules[item.modules])) { modules[item.modules].push(item); } else { modules[item.modules] = [item]; } } return modules; }, object.create(null)); or if you're not against using lodash
$scope.modules = _.groupby(data.d.results, 'modules'); then html can use nested repeater
<div ng-repeat="(module, items) in modules"> <p><strong>{{module}}</strong></p> <p ng-repeat="item in items" style="padding-left:10px;"> <a ng-href="{{item.fileref}}">{{item.title}}</a> </p> </div> 
Comments
Post a Comment