如何使用`AngularJS`将键值对转换为数组列表？

这是我们的数据：如何使用`AngularJS`将键值对转换为数组列表？

$scope.arr = { 
    "1": "A", 
    "2": "B", 
    "3": "C", 
    "4": "D", 
    "5": "E", 
    "6": "F", 
    "7": "Others", 
    "fromDate": { 
     "$date": "2015-02-13T20:59:28.947Z" 
    } 
}

如何将这些数据转换到一个列表/阵列格式？

我期待这样的事情：（顺便说一句，我想删除fromDate也）

$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" } 
]

来源

2017-01-29 Arav KT

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>

来源

2017-01-29 10:44:30

您可以使用for in循环来达到目的关键的和值的

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

来源

2017-01-29 10:35:39

Yo ü可以使用该功能map()，请参阅下面的代码片段

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

来源

2017-01-29 10:48:40

韦尔普，这就是角所以... 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" } 
]);

还是让我尝试把它在一个代码片段：

(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>

来源

2017-01-29 11:02:24 Ynot

如何使用`AngularJS`将键值对转换为数组列表？

回答

相关问题