如何使用“AngularJS”将键-值对转换为数组列表?

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)

我希望得到这样的结果:(顺便说一句，我还想删除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" }
]

4 个解决方案

#1

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>

#2

welp, this is Angular so... angular.forEach().

这是角的，所以…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>

#3

You can use the map() function, see the following snippet

您可以使用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);

#4

You can use for in loop to reach object key's and value's

您可以使用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]
        });
    }
};

#1

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>

#2