在Angular JS中转换数组对象的简单方法是什么?

What is easy way to convert object in array Angular JS?

本文关键字：简单 方法 是什么 对象 数组 Angular JS 转换      更新时间：2023-09-26

我的应用程序是在Angular JS上构建的，在服务器上有很多AJAX请求。例如，在PHP中，我将输出数组格式化为:

$dialog[$userId] = array(
   'time' => $key,
   'message' => $message['message'],
   'name_user'  => $info['name']
);
echo json_encode($dialog); die();

但是在Angular JS中，我得到的不是array而是object:

549: Objectid_user: "549"message: "Hello"name_user: "Ali .Akhmedov"时间:1432070505

问题，如果使用ng-repeat然后不工作排序对象。为什么在PHP中我设置数组，而在客户端获取对象?

转换对象到数组的简单方法是什么?因为页面上有很多来自AJAX的对象

您不需要将对象转换为数组，以便在ng-repeat中迭代它。您可以使用以下语法:

<div ng-repeat="(key, value) in items">{{key}} => {{value}}</div>

Documentation of ngRepeat .

不幸的是，这种方法不适用于orderBy过滤器。要按特定顺序遍历对象属性，需要实现自己的过滤器。可能是这样的:

JavaScript

angular.module('app', []).
  filter('orderByKey', ['$filter', function($filter) {
    return function(items, field, reverse) {
      var keys = $filter('orderBy')(Object.keys(items), field, reverse),
          obj = {};
      keys.forEach(function(key) {
        obj[key] = items[key];
      });
      return obj;
    };
  }]);


<div ng-repeat="(key, value) in items | orderByKey:'-'">{{key}} => {{value}}</div>

恰好

http://plnkr.co/edit/DJo0Y6GaOzSuoi202Hkj?p =

预览

然而，即使这种方法也只能从1.4.x开始工作，因为正如文档中所述，1.4.x之前的AngularJS将按字母顺序对对象属性进行排序，而在ngRepeat中迭代它们。

为了使它在Angular 1.3.x甚至1.2.x中工作，你可以执行对象到对象数组的转换，其中每个对象都包含key和value属性。这样，您将能够在ngRepeat中与包括orderBy在内的过滤器结合使用它。下面是一个代码:

JavaScript

angular.module('app', []).
  factory('srv', ['$http', function($http) {
    var items = [],
        loaded = false;
    return {
      getItems: function() {
        if(!loaded) { // Lazy loading
          $http.get('data.json').success(function(data) { // {key1: 'val1', key2: 'val2'}
            Object.keys(data).forEach(function(key) {
              items.push({key: key, value: data[key]});
            });
          });
          loaded = true;
        }
        return items; // [{key: 'key1', value:'val1'}, {key:'key2', value: 'val2'}]
      }
    };
  }]).
  controller('ctrl', ['$scope', 'srv', function($scope, srv) {
    $scope.items = srv.getItems();
  }]);


<div ng-repeat="item in items | orderBy:'-key'">{{item.key}} => {{item.value}}</div>

恰好

http://plnkr.co/edit/UXmlm1GKYRZzrOV5pMYT?p =预览

假设你有一个对象:

$scope.myObj = {type:"Fiat", model:500, color:"white"};

然后，在你的角Controller中，你可以这样做:

$scope.array = [];
angular.forEach($scope.myObj, function(element) {
  $scope.array.push(element);
});
然后在HTML 

<div ng-repeat="obj in array">{{obj}}</div>

这是一个演示活塞

orderBy是一个过滤器，过滤器需要一个数组。因此，一个直接的解决方案是将其与toArray滤波器结合使用。假设你想使用对象的time属性来排序:

<ol>
  <li ng-repeat="value in objectWithValues | toArray | orderBy: 'time'">
    {{value.name_user}} said <q>{{value.message}}</q> on {{value.time|date}}
  </li>
</ol>

由于toArray过滤器不是AngularJS自带的，你可以这样定义一个:

angular.module('ToArrayDemo', [])
  .filter('toArray', function() {
    return function(obj) {
      const result = [];
      angular.forEach(obj, function(val) {
        result.push(val);
      });
     return result;
   }
 });

见https://plnkr.co/edit/E857InfrEGqToW0SvwOh?p=preview

相关文章：