Konsumieren JSON-Objekt in AngularJS

Question

Meine Federauflage Controller-Endpoint ist als unten:

@CrossOrigin 
@RequestMapping(value = "/getEverything", method=RequestMethod.GET) 
public @ResponseBody MyItems getEverything(){ 
    return myService.getEverything(); 
} 

Unten ist MyItems Klasse:

public class MyItems { 

private Map<String, ArrayList<MyItem>> everything; 

public Map<String, ArrayList<MyItem>> getEverything() { 
    return everything; 
} 

public void setEverything(Map<String, ArrayList<MyItem>> everything) { 
    this.everything = everything; 
} 
} 

Der Rest Aufruf gibt Json in folgendem Format:

{ 
"myItems": { 
"Office": [ 
    { 
    "field1": "Read a book", 
    "field2": "xyz", 
    "field3": true, 
    "field4": 1489795200000 
    }, 
    { 
    "field1": "Write a program", 
    "field2": "abc", 
    "field3": false, 
    "field4": 1489881600000 
    } 
], 
"Home": [ 
    { 
    "field1": "Watch a movie", 
    "field2": "pqr", 
    "field3": true, 
    "field4": 1489797800000 
    } 
] 
} 
} 

Hier sind Office, Home Schlüssel in der zurückgegebenen Karte.

Wie kann ich diesen JSon in AngularJS iterieren oder konsumieren?

Wie bekomme ich die Schlüsselwerte?

$http.get(REST_SERVICE_URI + 'toDo/getAllItems').then(function(response){ 
    // what will go here ? 
    $scope.myItemLists = response.data; 
}); 

Ich mag myItemLists als Liste mit Objekten mit zwei Eigenschaften:

1) Listname: Dies wird der Schlüssel der Karte zurückgegeben werden.

2) Liste der Felder: Dies wird die Liste des zurückgegebenen Objekts sein.

Danke!

Answer 1

Versuchen Sie es so. verwenden Winkel forEach loop

var app = angular.module('app', []); 
 
app.controller('aCtrl', function($scope) { 
 
    $scope.myItems ={ 
 
"myItems": { 
 
"Office": [ 
 
    { 
 
    "field1": "Read a book", 
 
    "field2": "xyz", 
 
    "field3": true, 
 
    "field4": 1489795200000 
 
    }, 
 
    { 
 
    "field1": "Write a program", 
 
    "field2": "abc", 
 
    "field3": false, 
 
    "field4": 1489881600000 
 
    } 
 
], 
 
"Home": [ 
 
    { 
 
    "field1": "Watch a movie", 
 
    "field2": "pqr", 
 
    "field3": true, 
 
    "field4": 1489797800000 
 
    } 
 
] 
 
} 
 
} 
 

 
var keys = []; 
 
var objectValues = []; 
 
angular.forEach($scope.myItems.myItems,function(value,key){ 
 
    keys.push(key); 
 
    objectValues.push(value); 
 
}) 
 
    
 
    console.log(keys); 
 
    console.log(objectValues); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="aCtrl"> 
 

 
</div>

Answer 2

Sie in separate Variable siehe unten, Daten speichern kann

$http.get(REST_SERVICE_URI + 'toDo/getAllItems').then(function(response){ 
    // what will go here ? 
    $scope.myItemLists = response.data; 
    $scope.itemListOfficeData = response.data.myItems.Office; 
    $scope.itemListHomeData = response.data.myItems.Home; 
}); 

Oder Sie data-ng-repeat verschachtelt für Iterierte Daten siehe unten Link als Referenz verwenden.

Nested ng-repeat

using ng-repeat inside another ng-repeat

Answer 3

Während HJZ Antwort in Ordnung ist, wenn, was Sie wollen, ist durch Ihre JSON-Daten in der Steuerung zu wiederholen, aber wenn man einfach die Daten in einer Ansicht darstellen möchten, können Sie ng-repeat direkt auf Ihrem json Objekt wie folgt:

<ul> 
    <li ng-repeat="(key, value) in myItems">{{key}}: {{value | json}}</li> 
<ul> 

, die in den folgenden html grob dreht (einige Werte zur besseren Lesbarkeit wurden ignoriert):

<ul> 
    <li>Office: [{"field1": "Read a book"}, {"field1": "Read a book"}]</li> 
    <li>Home: [{"field1": "Watch a movie"}]</li> 
<ul> 

Sie können Nest diese ng-repeat Richtlinien weiter zu durchlaufen die Werte in JSON-Daten.

---

Alternativ kann, wenn alles, was Sie benötigen eine Reihe von Tasten oder ein Array von Werten ist, dann JavaScript bekam Funktionen können Sie diese verwenden, extrahieren:

var keys = Object.keys(myItems); 
// -> ['Office', 'Home'] 

var values = Object.values(myItems); 
// -> [[{"field1": "Read a book"}, {"field1": "Write a program"}], [{"field1": "Watch a movie"}]] 

Answer 4

Sie können zuerst das verschachtelte Objekt abflachen und dann über sie iterieren oder Sie können wie verschachtelte ng-repeat verwenden unter:

var app = angular.module('app', []); 
 
app.controller('aCtrl', function($scope) { 
 
    var items = { 
 
    "myItems": { 
 
     "Office": [{ 
 
      "field1": "Read a book", 
 
      "field2": "xyz", 
 
      "field3": true, 
 
      "field4": 1489795200000 
 
     }, 
 
     { 
 
      "field1": "Write a program", 
 
      "field2": "abc", 
 
      "field3": false, 
 
      "field4": 1489881600000 
 
     } 
 
     ], 
 
     "Home": [{ 
 
     "field1": "Watch a movie", 
 
     "field2": "pqr", 
 
     "field3": true, 
 
     "field4": 1489797800000 
 
     }] 
 
    } 
 
    } 
 
    $scope.myItems = items.myItems; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="aCtrl"> 
 
    <ul> 
 
    <li ng-repeat="(item, fields) in myItems"> 
 
     {{item}} 
 
     <ul> 
 
     <li ng-repeat="field in fields"> 
 
      {{field}} 
 
      <ul> 
 
      <li ng-repeat="(name, value) in field"> 
 
       {{name}}:{{value}} 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>