How to remove or hide a key-value pair of an array in AngularJS

Question

I have a collection of objects in an array like this:

[
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  },...
]

In my view I only want to display Name, Age, City and Country. Well, my question is how can I remove GROUP_ID and ACTIVE in every object of my collection? I was looking for a solution and found .slice() but I don't know exactly whether is it the right one and how to use this javascript function for each object in an array.

EDIT: For more clarification. My view is defined like below:

<md-list-item ng-repeat="cItems in ::contentItems track by $index">
   <span ng-repeat="(key, value) in cItems track by $index" flex="auto">
      {{ ::value }}
   </span>
   <md-divider></md-divider>
</md-list-item>

When you are iterating the objects in that array, simply display the properties you are interested in. Why do you want to remove it from the object all together? — yBrodsky, Nov 17 '16 at 15:29
@yBrodsky Could you give me a better solution to return the values without these to key-value pairs — yuro, Nov 17 '16 at 15:30
http://stackoverflow.com/questions/22918613/underscore-remove-all-key-value-pairs-from-an-array-of-object — yBrodsky, Nov 17 '16 at 15:31
@yBrodsky there's no reason to throw a library at this simple of a problem. — CollinD, Nov 17 '16 at 15:33
i think it is more an angular question, how to display some properties and some not, and not how to delete the properties from the object. — Nina Scholz, Nov 17 '16 at 15:33
You can check my answer or this Stack Overflow question: http://stackoverflow.com/questions/208105/how-to-remove-a-property-from-a-javascript-object. However, please check the comments of my answer, since I share the opinion with @NinaScholz that your question is not well asked and has nothing to do with AngularJS. — Tome Pejoski, Nov 17 '16 at 15:38
@TomePejoski It is especially important for the ngRepeat directive. I need to display a list table of values in my view. But when I do a GET request to the server I get 6 keys in every object (you can see it above). but for my view I only need the first 4 keys with values. Nina Scholz is right. It is an angular question. — yuro, Nov 17 '16 at 15:45
@yuro, so executing my code before passing the data to the ngRepeat is not working? — Tome Pejoski, Nov 17 '16 at 15:47
[How to filter (key, value) with ng-repeat in AngularJs?](http://stackoverflow.com/q/14788652/215552) — Heretic Monkey, Nov 17 '16 at 16:00

Tome Pejoski · Answer 1 · 2016-11-17T15:49:14.533

3

You can use the following lines:

contentItems.forEach(function (entry) {
  delete entry['GROUP_ID'];
  delete entry['ACTIVE'];
});

edited Nov 17 '16 at 15:49

answered Nov 17 '16 at 15:31

Tome Pejoski

1,582
2
10
34

1

@yuro By the way this has nothing to do with AngularJS. This is pure JavaScript code. – Tome Pejoski Nov 17 '16 at 15:34
@yuro If you want to use AngularJS to hide those properties, just don't bind them to any HTML element. – Tome Pejoski Nov 17 '16 at 15:34
@yuro prepare the data (remove the attributes) before passing it to the ngRepeat. – Tome Pejoski Nov 17 '16 at 15:48
Ok wait. I will try your solution. – yuro Nov 17 '16 at 15:49
Thanks.. I guess this solution is good enough. Is it right, that the properties don't really removed from the array? – yuro Nov 17 '16 at 15:58
@yuro perfect. They will be really removed, so if you need them later in the code they will be gone. – Tome Pejoski Nov 17 '16 at 15:59
@yuro you can also add an ng-if in your template with value "key !== 'GROUP_ID' || 'ACTIVE'". This will hide only those keys but won't remove them from the object. – Tome Pejoski Nov 17 '16 at 16:01
@yuro, so instead of {{ ::value }} use {{ ::value }} – Tome Pejoski Nov 17 '16 at 16:04
@yuro please accept my answer if this works for you. Cheers. – Tome Pejoski Nov 17 '16 at 16:05
Great.. But I don't want any static code in the view.. because I use this view also for several other controllers :) – yuro Nov 17 '16 at 16:09
@yuro then prepare the data in the JavaScript code where you want to, but don't work with the original array. Use var arrayCopy = arrayOriginal.slice(); to copy the array. – Tome Pejoski Nov 17 '16 at 16:12
I tried the ngIf and ngShow directives but they still show the values of these two keys :( – yuro Nov 19 '16 at 23:36

mika · Answer 2 · 2016-11-17T15:42:39.117

0

Assuming your array is a variable named array:

for ( var i=0,l=array.length; i<l; i++ ) {
  delete array[i]['GROUP_ID'];
  delete array[i]['ACTIVE'];
}

if you're using ES6 you could also do:

for ( let item of array ) {
  delete item['GROUP_ID'];
  delete item['ACTIVE'];
}

edited Nov 17 '16 at 15:42

answered Nov 17 '16 at 15:32

mika

1,411
1
12
23

score 0 · Answer 3 · answered Nov 17 '16 at 15:34

0

As mentioned in comments there is no need to delete the keys. You can simple avoid displaying them.

Still if deleting is objective then use delete method

a.forEach(function(item){
delete(item['GROUP_ID']);
delete(item['ACTIVE'])
});

DEMO

answered Nov 17 '16 at 15:34

brk

48,835
10
56
78

taguenizy · Answer 4 · 2016-11-17T15:52:29.210

0

You can simply remove properties of an object by using delete. I've added an array of properties to delete but you could delete them directly.

var data = [
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  }
];

var propertiesRemove = ['GROUP_ID', 'ACTIVE']

data.forEach(function(item){
  propertiesRemove.forEach(function(prop){
    delete item[prop];
  });
});

console.log(data);

If you don't want to change your data and it's just a display issue you could render only the properties you want.

<md-list-item ng-repeat="cItems in ::contentItems track by $index">
   <span flex="auto">{{cItems.NAME}}</span>
   <span flex="auto">{{cItems.AGE}}</span>
   <span flex="auto">{{cItems.CITY}}</span>
   <span flex="auto">{{cItems.COUNTRY}}</span>
   <md-divider></md-divider>
</md-list-item>

edited Nov 17 '16 at 15:52

answered Nov 17 '16 at 15:47

taguenizy

2,140
1
8
26

I know the simple solution of setting the properties in the template. But I need a dynamic solution :).. I guess to use nested forEach()-function is not so good for the performance. – yuro Nov 17 '16 at 15:56
@yuro you can update your `ng-repeat` with `(key, value) in getUpdatedItem(cItems) track by $index"` where the `function getUpdatedItem` returns the item with the properties you want based on the initial element without changing anything. Is that something more aligned with what you want? – taguenizy Nov 17 '16 at 16:02
Ok... and how looks like the function or how works it? – yuro Nov 17 '16 at 16:03
Add it on your controller and it could be as simple as `getUpdatedItem(item) { return { NAME: item. NAME, AGE: item.AGE, CITY: item.CITY, COUNTRY: item.COUNTRY } }`. Can update answer with it if you want – taguenizy Nov 17 '16 at 16:07
it is also good. But the problem is when I use this dynamically. I always need to define all necessary properties and that's tedious. – yuro Nov 17 '16 at 16:13
You can do it dynamically in 2 ways. Or indicating which properties you want to include or by indicating the ones you want to exclude. That's essencially the purpose of the array I've added in the answer. – taguenizy Nov 17 '16 at 16:16

score 0 · Answer 5 · answered Nov 17 '16 at 15:53

Actually to display required information in angular we don't need to remove other elements from array in template we can go with limited information.

ANGULAR CODE

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  }
]
});

Angular Template

<body ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="record in records">
<li>{{record.NAME}}</li>
<li>{{record.AGE}}</li>
<li>{{record.COUNTRY}}</li>
</ul>

But as you are asking following procedure will answer your question.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $data = [
  {
    "NAME": "John Doe",
    "AGE": 25,
    "CITY": "New York",
    "COUNTRY": "USA",
    "GROUP_ID": 1,
    "ACTIVE": 1
  },
  {
    "NAME": "Peter Parker",
    "AGE": 44,
    "CITY": "Los Angeles",
    "COUNTRY": "USA",
    "GROUP_ID": 2,
    "ACTIVE": 1
  }
]; 
$scope.records = $data.map(function(item){
delete(item['GROUP_ID']);

delete(item['ACTIVE']);
return item; 
});
});

How to remove or hide a key-value pair of an array in AngularJS

5 Answers5