在AngularJs使用JSON對象

Question

我的春天休息控制器端點如下：

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

下面是MyItems類：

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; 
} 
} 

的REST調用在下面的格式返回JSON：

{ 
"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 
    } 
] 
} 
} 

這裏Office,Home是返回地圖中的鍵。

如何在AngularJS中迭代或使用此JSon？

如何獲取關鍵值？

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

欲myItemLists作爲含有對象具有兩個屬性的列表：

1）列表名：這將是所返回的映射的鍵。

2）字段列表：這將是返回對象的列表。

謝謝！

Answer 1

試試這個。使用角forEach環

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

可以存儲在單獨的變量數據見下文，

$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; 
}); 

或者可以使用嵌套data-ng-repeat用於迭代數據見下面的鏈接以供參考。

Nested ng-repeat

using ng-repeat inside another ng-repeat

Answer 3

雖然HJZ答案是好的，如果你想要的是通過在控制器的JSON數據迭代，但是如果你只是想在一個視圖來顯示數據，你可以使用ng-repeat直接在您的JSON對象，像這樣的：

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

這大致變成下面的HTML （一些值都被忽略了更好的可讀性）：

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

可以通過嵌套這個ng-repeat指令，進一步通過在你的JSON數據的值進行迭代。

---

或者，如果你需要的是鑰匙的數組或值的數組，然後JavaScript的有功能的，你可以用它來提取那些：

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

您可以首先拼合嵌套對象和然後迭代它，或者你可以使用嵌套NG-重複如下圖所示：

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>