How to convert key-value pairs to list of array using `AngularJS`?
Question
This is our data:
$scope.arr = {
"1": "A",
"2": "B",
"3": "C",
"4": "D",
"5": "E",
"6": "F",
"7": "Others",
"fromDate": {
"$date": "2015-02-13T20:59:28.947Z"
}
}
how to convert this data to a list/array format?
I am expecting something like this: (BTW, I want to remove the fromDate also)
$scope.formattedArr = [
{value: "1",name: "A" },
{value: "2",name: "B" },
{value: "3",name: "C" },
{value: "4",name: "D" },
{value: "5",name: "E" },
{value: "6",name: "F" },
{value: "7",name: "Others" }
]
4 answers
solution1
2 ACCPTED 2017-01-29 10:44:30
angular.module('app',[]) .controller('ctrl',function($scope){ $scope.arr = { "1": "A", "2": "B", "3": "C", "4": "D", "5": "E", "6": "F", "7": "Others", "fromDate": { "$date": "2015-02-13T20:59:28.947Z" } } $scope.aarr = []; for (key in $scope.arr){ $scope.aarr.push({'value' : key , 'name' : $scope.arr[key] }) } console.log($scope.aarr) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl">{{aarr}}</div>
solution2
2 2017-01-29 11:02:24
welp, this is Angular so... angular.forEach().
$scope.arr = {
"1": "A",
"2": "B",
"3": "C",
"4": "D",
"5": "E",
"6": "F",
"7": "Others",
"fromDate": {
"$date": "2015-02-13T20:59:28.947Z"
}
}
$scope.formattedArr = [];
angular.forEach($scope.arr, function(value, key) {
if ( key !== 'fromDate' ) {
this.push({value: key, name: value});
}
}, $scope.formattedArr);
expect($scope.formattedArr).toEqual([
{value: "1",name: "A" },
{value: "2",name: "B" },
{value: "3",name: "C" },
{value: "4",name: "D" },
{value: "5",name: "E" },
{value: "6",name: "F" },
{value: "7",name: "Others" }
]);
Lemme try putting it in a code snippet:
(function(angular) { 'use strict'; angular.module('myapp', []).controller('MainCtrl', function MainCtrl() { this.arr = { "1": "A", "2": "B", "3": "C", "4": "D", "5": "E", "6": "F", "7": "Others", "fromDate": { "$date": "2015-02-13T20:59:28.947Z" } }; this.formattedArr = []; angular.forEach(this.arr, function(value, key) { if( key !== 'fromDate') { this.push({value: key, name: value}); } }, this.formattedArr); }); })(window.angular);
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-heroComponentSimple-production</title> <script src="//code.angularjs.org/snapshot/angular.min.js"></script> </head> <body ng-app="myapp"> <div ng-controller="MainCtrl as vm"> <b>Very basic AngularJs component example</b><br><br> <div><b>Before</b></div> <pre>arr = {{vm.arr | json}}</pre> <div><b>After</b></div> <pre>formattedArr = {{vm.formattedArr | json}}</pre> </div> </body> </html>
solution3
1 2017-01-29 10:35:39
You can use for in loop to reach object key's and value's
for (var key in $scope.arr) {
if ($scope.arr.hasOwnProperty(key) && typeof $scope.arr[key] === 'string') {
$scope.formattedArr.push({
value: key,
name: $scope.arr[key]
});
}
};
solution4
1 2017-01-29 10:48:40
You can use the map() function, see the following snippet
var $scope = {}; $scope.arr = { "1": "A", "2": "B", "3": "C", "4": "D", "5": "E", "6": "F", "7": "Others", "fromDate": { "$date": "2015-02-13T20:59:28.947Z" } } $scope.list = Object.keys($scope.arr).map(function(el, index) { if (el != "fromDate") return { value: index + 1, name : $scope.arr[el] }; }); console.log($scope.list);
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.
Related Question
AngularJS formatting data based on array of key-value pairs
How to access dynamic array and get key-value pairs using ng-repeat
Set multiple key-value pairs as a value to a key in AngularJS
How to filter Array in array key-value in AngularJS
How do you filter a json list by key-value in AngularJS?
How to remove or hide a key-value pair of an array in AngularJS
AngularJS ng-repeat key-value pairs to directive
AngularJS - How do I push key value pairs into an array?
How to display key-value pairs from a JSON object using Angular
angularjs : iterate array with key value pairs
Related Tags