Qual è il modo semplice per convertire l'oggetto nell'array Angular JS?

Question

La mia applicazione è stata creata su Angular JS e ha molte richieste AJAX sul server. Ad esempio, nel formato di output PHP ho serie come come:

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

echo json_encode($dialog); die(); 

Ma in angolare JS io non capisco serie, ma oggetto:

549: Objectid_user: messaggio di "549": "Ciao "name_user: "Ali Akhmedov" tempo: 1432070505

Problema che se uso ng-repeat poi non funziona l'ordinamento per oggetto. Perché in PHP ho impostato l'array ma sul client ho ottenuto l'oggetto?

Quale modo semplice per convertire un oggetto in un array? Perché ho un sacco di oggetti sulla pagina di AJAX.

Answer 1

Diciamo che avete un oggetto come:

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

Poi, nel vostro angolare Controller si può fare qualcosa di simile:

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

e poi nel vostro HTML

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

Ecco una demo plunker

Answer 2

Non è necessario convertire l'oggetto in serie per iterare su di esso in ng-repeat. Si può solo utilizzare la seguente sintassi:

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

Documentation di ngRepeat.

Sfortunatamente, questo approccio non funziona con il filtro orderBy. Per eseguire un'iterazione sulle proprietà dell'oggetto nell'ordine specifico, è necessario implementare il proprio filtro. Potrebbe essere qualcosa di simile:

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

Tuttavia, anche questo approccio funzionerà solo a partire da 1.4.x, poiché come indicato nella documentazione, AngularJS prima di 1.4.x ordinerà le proprietà dell'oggetto in ordine alfabetico mentre itera su di esse in ngRepeat.

Per farlo funzionare in angolare 1.3.x o anche 1.2.x si può eseguire la conversione di oggetto da array di oggetti, ciascuno dei quali conterrà key e value proprietà. In questo modo si sarà in grado di utilizzarlo in ngRepeat in combinazione con filtri tra cui orderBy. Ecco un codice:

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 3

orderBy è un filtro, e filtri require an array. Quindi una soluzione semplice è combinarla con un filtro toArray. Supponendo che si desidera ordinare gli oggetti utilizzando le loro proprietà 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> 

Come il filtro toArray non viene consegnato con AngularJS, è possibile definire uno come:

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

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