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

【问题标题】：What is easy way to convert object in array Angular JS?在数组Angular JS中转换对象的简单方法是什么？
【发布时间】：2015-05-22 09:06:34
【问题描述】：

我的应用程序是基于 Angular JS 构建的，并且在服务器上有很多 AJAX 请求。例如，在 PHP 中，我将输出 array 格式化为：

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

echo json_encode($dialog); die();

但在 Angular JS 中，我得到的不是数组而是对象：

549: Objectid_user: "549"message: "Hello"name_user: "Ali 艾哈迈多夫“时间：1432070505

如果使用ng-repeat 则无法对对象进行排序。为什么在 PHP 中我设置数组但在客户端获取对象？

有什么简单的方法可以将对象转换为数组？因为我在 AJAX 页面上有很多对象。

【问题讨论】：

json_encode 将php中的关联数组解析为json中的对象。
关联数组是（JS-）对象。不清楚你想要什么样的数据，你对[1432070505, "Hello", "Ali Akhmedo"]满意吗？
好的，有什么办法解决问题？
我想要 ng-repeat 中的工单，用于带有键的对象：549: Objectid_user: "549"message: "Hello"name_user: "Ali Akhmedov"time: 1432070505
@vaved 在 PHP 中，确保 $dialog 中只有数字键，并且在 0 和最高 id 之间的每个键都设置，然后 json_encode 将输出一个数组。跨度>

标签： javascript angularjs

【解决方案1】：

您无需将对象转换为数组即可在ng-repeat 中对其进行迭代。您可以使用以下语法：

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

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

HTML

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

Plunker

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

然而，即使这种方法也只能从 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();
  }]);

HTML

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

Plunker

http://plnkr.co/edit/UXmlm1GKYRZzrOV5pMYT?p=preview

【讨论】：

但是如果我想显示从最新到最旧排序的数据？我试过-key 和+key 没有区别。 Des 不工作
@vaved 我用 Angular 1.4.x 和更早版本的两个附加解决方案更新了答案。请看一下，它也适用于过滤器。
这行得通，但这在技术上不是无效的，因为它依赖于 JavaScript 维护对象属性的插入顺序，这是无法保证的？

【解决方案2】：

假设你有一个像这样的对象：

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

这是一个演示plunker

【讨论】：

【解决方案3】：

orderBy 是一个过滤器，过滤器require an array。因此，一个简单的解决方案是将其与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

【讨论】：