AngularJS (10-2) $http.get 讀json
本篇完整程式碼：(Plunkr)
$http.get('XXX.json') 就可以讀取json檔了。若你不清楚$http.get()或是.success()，請看前一篇文章：AngularJS (10) $http.get 讀檔
實例
我有兩個人的資料，人名和地址。我想把他們顯示在網頁上。
Lily, ooh
Ihc, lala
test.json
text.json 用到兩種括號，意義是 [] = array，{} = list。字串要有" "。
[
{
"name":"Lily",
"addr":"Hualien"
},
{
"name":"Ihc",
"addr":"Taipei"
}
]
HTML
假設我們只是想要印出人名和地址，這樣寫就夠了。注意，不管在HTML或是JS，json變數的.name, .addr不需要" "。
<body ng-app="app1" ng-controller="HelloController">
<p ng-repeat="item in list">
{{item.name}}, {{item.addr}}
</p>
</body>
JS
初始化一個空陣列$scope.list，再用$http.get()讀取text.json。
var app = angular.module("app1",[])
app.controller("HelloController", ['$scope','$http',function($scope, $http){
$scope.list=[];
$http.get('test.json').success(function(data){
angular.forEach(data,function(item, ind){
$scope.list.push(item);
});
});
}]);
完成
Lily, ooh
Ihc, lala
留言
張貼留言