CODEWITHSUNDEEP
angularjsangularjs-ng-repeatgroupingaccordion
Kamal
Kamal

Reputation: 1081

Merge and display multiple rows in a single row using ng-repeat

I need to merge and display in a single row for particular data which has same id. I'm using ng-repeat for displaying data. Sample JSON:

$scope.sampleTest = [{"city": "Chennai", "name":"Sample"},
                 {"city": "Madurai", "name":"Test"}, {"city": "Chennai", "name":"Testing"}]

I'm using uibaccordion for grouping data.

Expected Output: *Chennai Sample, Testing *Madurai Test

I'll get dynamic json data. Can anyone help me in this.

Upvotes: 0

Views: 2261

Answers (2)

Coding Pig
Coding Pig

Reputation: 66

Instead of doing <div ng-repeat="(key, value) in sampleTest"> ... </div>, you can do <div ng-repeat="(key, value) in merge(sampleTest)"> ... </div> if you define a function merge to transform the sampleTest object.

function merge(toMerge) {
  var merged = {};
  for (k in toMerge) {
    if (k in merged) {
        merged[k] += toMerge[k];
    } else {
        merged[k] = toMerge[k];
    }
  }
  return merged;
}

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222592

You can group by city name using filter,

<body ng-controller="myCtrl">
  <div ng-repeat="(key, value) in sampleTest | groupBy: '[city]'">
    <div ng-repeat="player in value">
       {{key}} {{ player.name }} 
    </div>
  </div>
</body>

DEMO

var app = angular.module('sampleApp', ['angular.filter']);

 
       
app.controller('myCtrl', function($scope) {
     $scope.sampleTest = [{"city": "Chennai", "name":"Sample"},
     {"city": "Madurai", "name":"Test"}, {"city": "Chennai", "name":"Testing"}];
 });
<!DOCTYPE html>
<html ng-app="sampleApp" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
  <div ng-repeat="(key, value) in sampleTest | groupBy: '[city]'">
    <div ng-repeat="player in value">
       {{key}} {{ player.name }} 
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions