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>
5 answers
solution1
2 2016-11-17 15:31:00
You can use the following lines:
contentItems.forEach(function (entry) {
delete entry['GROUP_ID'];
delete entry['ACTIVE'];
});
solution2
0 2016-11-17 15:32:19
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'];
}
solution3
0 2016-11-17 15:34:44
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'])
});
solution4
0 2016-11-17 15:47:13
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>
solution5
0 2016-11-17 15:53:15
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;
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.