AngularJS: ng-repeat excluding duplicate keys

Question

AngularJS: ng-repeat excluding duplicate keys

Here is a collection of objects I am working with:

[{
 key:test1
 name: name1
},
{
 key:test1
 name: name2
},
{
 key:test2
 name: name3
}]

I am currently using ng-repeat to showcase them:

<tr ng-repeat=item in list>
  <td>{{item.key}}</td>
  <td>{{item.name}}</td>
</tr>

I am wondering if there is a way to merge values with the same keys without altering the structure, so that test1 is not repeated twice like in my example.

Current output:

test1 : name1

test1 : name2

test2 : name3


Desired output:

test1 : name1

_____  name2

test2 : name3

javascript angularjs

Answer 1

Answer №1

If you're looking to group items, consider using the groupBy filter:

angular.module('app', ['angular.filter']).controller('ctrl', function($scope){
  $scope.list = [{
     key:'test1',
     name: 'name1'
    }, {
     key:'test1',
     name: 'name2'
    },{
     key:'test1',
     name: 'name3'
    },{
     key:'test2',
     name: 'name4'
    }];
})

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <tbody>
    <tr ng-repeat-start="(key, value) in list | groupBy: 'key'">      
      <td>{{key}}</td>
      <td>{{value[0].name}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat='item in value.splice(1)'>
      <td></td>
      <td>{{item.name}}</td>
    </tr>
  </tbody>
</table>

Answer 2

If you're looking to group items, consider using the groupBy filter:

angular.module('app', ['angular.filter']).controller('ctrl', function($scope){
  $scope.list = [{
     key:'test1',
     name: 'name1'
    }, {
     key:'test1',
     name: 'name2'
    },{
     key:'test1',
     name: 'name3'
    },{
     key:'test2',
     name: 'name4'
    }];
})

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>

<table ng-app='app' ng-controller='ctrl'>
  <tbody>
    <tr ng-repeat-start="(key, value) in list | groupBy: 'key'">      
      <td>{{key}}</td>
      <td>{{value[0].name}}</td>
    </tr>
    <tr ng-repeat-end ng-repeat='item in value.splice(1)'>
      <td></td>
      <td>{{item.name}}</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

ng-repeat="element in items | distinct:'identifier'"

Answer 4

ng-repeat="element in items | distinct:'identifier'"

Answer 5

Answer №3

Follow these steps to consolidate the common key values in one place using angular-filter:

angular.module('app',['angular.filter']).controller('mainCtrl', function($scope){$scope.list = [{
       key:'test1',
       name: 'name1'
      },
      {
       key:'test1',
       name: 'name2'
      },
      {
       key:'test2',
       name: 'name3'
      }]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>


<div ng-app='app' ng-controller='mainCtrl'>
    <div ng-repeat="(key, value) in list | groupBy: 'key'">
      <span ng-repeat='val in value'>{{val.name}} </span>
    </div>     
</div>

Answer 6

Follow these steps to consolidate the common key values in one place using angular-filter:

angular.module('app',['angular.filter']).controller('mainCtrl', function($scope){$scope.list = [{
       key:'test1',
       name: 'name1'
      },
      {
       key:'test1',
       name: 'name2'
      },
      {
       key:'test2',
       name: 'name3'
      }]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>


<div ng-app='app' ng-controller='mainCtrl'>
    <div ng-repeat="(key, value) in list | groupBy: 'key'">
      <span ng-repeat='val in value'>{{val.name}} </span>
    </div>     
</div>

Answer 7

Answer №4

Ensure the list is updated before utilizing ng-repeat.


function updateList(obj, key, value) {
   var newList = [];
   var lookup = {};

   for(var index in obj) {
      if (lookup.hasOwnProperty(obj[index][key])) {
         obj[index][value] =  lookup[obj[index][key]][value] + " " + obj[index][key];
         lookup[obj[index][key]] = obj[index];
      } else {
         lookup[obj[index][key]] = obj[index];
      }
   }

   for(index in lookup) {
      newList.push(lookup[index]);
   }
   return newList;
}

var updatedList = updateList(array, "key", "name");

Answer 8

Ensure the list is updated before utilizing ng-repeat.


function updateList(obj, key, value) {
   var newList = [];
   var lookup = {};

   for(var index in obj) {
      if (lookup.hasOwnProperty(obj[index][key])) {
         obj[index][value] =  lookup[obj[index][key]][value] + " " + obj[index][key];
         lookup[obj[index][key]] = obj[index];
      } else {
         lookup[obj[index][key]] = obj[index];
      }
   }

   for(index in lookup) {
      newList.push(lookup[index]);
   }
   return newList;
}

var updatedList = updateList(array, "key", "name");

Answer 9

Answer №5

If you're looking for a solution, consider the following example:

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
    $scope.items = [{
     "key":"test1",
     "name": "name1"
    },
    {
     "key":"test1",
     "name": "name2"
    },
    {
     "key":"test2",
     "name": "name3"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="item in items | groupBy: 'key'">
    <h3>Key : {{item[0].key}}</h3>
      <p>Names : <span ng-repeat='i in item'>{{i.name}} </span></p>
    </div> 
</div>

Answer 10

If you're looking for a solution, consider the following example:

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
    $scope.items = [{
     "key":"test1",
     "name": "name1"
    },
    {
     "key":"test1",
     "name": "name2"
    },
    {
     "key":"test2",
     "name": "name3"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="item in items | groupBy: 'key'">
    <h3>Key : {{item[0].key}}</h3>
      <p>Names : <span ng-repeat='i in item'>{{i.name}} </span></p>
    </div> 
</div>

AngularJS: ng-repeat excluding duplicate keys

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Reduce the length of the text to 50 characters after the current word, while ensuring that the word

What is the method for setting and comparing collectionsjs equality?

How can I retrieve the value of a div nested within another div?

struggling to determine the connection status between tables (Many-to-many or one-to-one)

Can you explain the reference point used in the `drawImage()` function on a canvas?

What is the best way to integrate nano.uuid into a series of promises that are fetching data from the database?

Identifying Mistakes during Promise Initialization

Is it feasible to incorporate a third-party JavaScript file into a React application?

Unlocking Discord Account Information through OAuth2

RectAreaLight in Three js does not produce any light reflection when used with MeshPhongMaterial due to lack of support for OES_texture_half

Running Handlebars using NodeJS can sometimes result in a "Cannot find module './parser'" error

Table of contents not working on Vercel, yet functions properly on localhost

What is the best way to manage sessions in angularjs using javascript?

Exploring the Depths of Multidimensional JSON Arrays in PHP

Create a function in JavaScript that generates all possible unique permutations of a given string, with a special consideration

Encountering Uncaught Syntax Error when attempting a request with JSON parameters

Error: JSON parsing error encountered due to an unexpected token 'U' while trying to read a file with

Receiving a "Bad Request" error when trying to access a website

A more organized method for assigning Enter key presses

Failure to send Websocket connection