在數組Angular JS中轉換對象的簡單方法是什么？

Question

我的應用程序是基於Angular JS構建的，並且在服務器上有很多AJAX請求。 例如，在PHP中，我將輸出數組格式化為：

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

echo json_encode($dialog); die();

但是在Angular JS中，我得到的不是數組而是對象：

549：Objectid_user：“549”消息：“你好”name_user：“Ali Akhmedov”時間：1432070505

如果使用ng-repeat然后不能對對象進行排序的問題。 為什么在PHP中我設置數組但在客戶端獲取對象？

將對象轉換為數組的簡單方法是什么？ 因為我在AJAX頁面上有很多對象。

Answer 1

您不需要將對象轉換為數組，以便在ng-repeat迭代它。 您可以使用以下語法：

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

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

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

這是一個演示插件

Answer 3

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>

由於AngularJS不附帶toArray過濾器，您可以將其定義為：

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