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
– yBrodsky, Commented Nov 17, 2016 at 15:29
@yBrodsky Could you give me a better solution to return the values without these to key-value pairs — yuro
– yuro, Commented Nov 17, 2016 at 15:30
@yBrodsky there's no reason to throw a library at this simple of a problem. — CollinD
– CollinD, Commented Nov 17, 2016 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
– Nina Scholz, Commented Nov 17, 2016 at 15:33

Tome Pejoski · Accepted Answer · 2016-11-17 15:49:14Z

3

You can use the following lines:

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

edited Nov 17, 2016 at 15:49

answered Nov 17, 2016 at 15:31

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Tome Pejoski Over a year ago

@yuro By the way this has nothing to do with AngularJS. This is pure JavaScript code.

Tome Pejoski Over a year ago

@yuro If you want to use AngularJS to hide those properties, just don't bind them to any HTML element.

Tome Pejoski Over a year ago

@yuro prepare the data (remove the attributes) before passing it to the ngRepeat.

yuro Over a year ago

Ok wait. I will try your solution.

yuro Over a year ago

Thanks.. I guess this solution is good enough. Is it right, that the properties don't really removed from the array?

|

brk · Accepted Answer · 2016-11-17 15:34:44Z

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, 2016 at 15:34

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

mika · Accepted Answer · 2016-11-17 15:42:39Z

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, 2016 at 15:42

answered Nov 17, 2016 at 15:32

mika

1,4611 gold badge12 silver badges23 bronze badges

Comments

taguenizy · Accepted Answer · 2016-11-17 15:52:29Z

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, 2016 at 15:52

answered Nov 17, 2016 at 15:47

taguenizy

2,2851 gold badge12 silver badges26 bronze badges

6 Comments

yuro Over a year ago

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.

taguenizy Over a year ago

@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?

yuro Over a year ago

Ok... and how looks like the function or how works it?

taguenizy Over a year ago

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

yuro Over a year ago

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.

|

BEJGAM SHIVA PRASAD · Accepted Answer · 2016-11-17 15:53:15Z

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; 
});
});

Collectives™ on Stack Overflow

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

5 Answers 5

12 Comments

Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

12 Comments

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related