AngularJS Json列表

我想顯示一個json在我的頁面中列出與AngularJS.But Json有子對象我嘗試一些但不工作。我可以顯示文本和ID，但它不工作緯度和經度在posibiton名tag.I不知道如何表達，在我的名單AngularJS Json列表

var app = angular.module("VarnaApp",[]); 
 

 
app.service("varnaService",function($http, $q) 
 
{ 
 
\t var deferred = $q.defer(); 
 
\t $http.get('api/station.json').then(function(data) 
 
\t { 
 
\t \t deferred.resolve(data); 
 
\t }); 
 

 
\t this.getStations = function() 
 
\t { 
 
\t \t return deferred.promise; 
 
\t } 
 

 
\t }) 
 

 

 
.controller ("varnaCtrl",function($scope,varnaService) 
 
{ 
 
\t var promise = varnaService.getStations(); 
 
\t promise.then(function(data) 
 
\t { 
 
\t \t $scope.stations = data.data; 
 
\t }); 
 
})

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>AccioCode AngularJS Tutorial</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"> 
 
\t <meta name="viewport" content="width=device-width, user-scalable=no"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
\t <script src="js/app.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="mainContainer" data-ng-app="VarnaApp"> 
 
\t <h1>Varna Stations</h1> 
 
\t <div data-ng-controller="varnaCtrl"> 
 
\t \t <table class="table table-striped"> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <th>Id</th> 
 
\t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t <th>loc</th> 
 

 
\t \t \t \t </tr> 
 

 
\t \t \t </thead> 
 
<tbody> 
 
\t <tr data-ng-repeat="station in stations"> 
 
\t <td>{{station.id}}</td> 
 
\t <td>{{station.text}}</td> 
 
\t <td>{{station.loc}}</td> 
 
\t </tr> 
 
</tbody> 
 

 
\t \t </table> 
 
\t \t 
 
\t </div> 
 

 
</div> 
 

 

 
</body> 
 
</html>

我的JSON數據是

[ 
    { 
     "id": 2063, 
     "text": "test", 
     "position": { 
      "lat": 43.357048, 
      "lon": 27.9815636 
     } 
    }, 
    { 
     "id": 2563, 
     "text": "test2", 
     "position": { 
      "lat": 43.3570175, 
      "lon": 27.9816666 
     } 
    }, 
    { 
     "id": 2538, 
     "text": "test3", 
     "position": { 
      "lat": 43.3092232, 
      "lon": 27.97827 
     } 
    } 
]

來源

2015-10-21 ZgrKARALAR

我不太明白station.loc應該是什麼。如果你想顯示緯度和經度只是這樣做：

<tbody> 
    <tr data-ng-repeat="station in stations"> 
    <td>{{station.id}}</td> 
    <td>{{station.text}}</td> 
    <td>{{station.position.lat}}</td> 
    <td>{{station.position.lon}}</td> 
    </tr> 
</tbody>

來源

2015-10-21 12:31:03 Danmoreng

謝謝你的幫助，解決了我的問題:)。我忘了選擇職位:) – ZgrKARALAR

似乎工作。 http://plnkr.co/edit/CCOG5m2IczVBgYGnvr61?p=preview – Michael

-1

您擁有的JSON是JSON 字符串。你必須首先解析它到JavaScript對象：

.controller ("varnaCtrl",function($scope,varnaService) 
{ 
    var promise = varnaService.getStations(); 
    promise.then(function(data) 
    { 
     $scope.stations = JSON.parse(data.data); 
    }); 
})

來源

2015-10-21 12:22:36 alvarodms

但'$ http' deaultResponseTransformer已經解析到JSON對象的響應。 – Michael

是的，就像@邁克爾一樣。我不需要JSON.parse。它的工作，現在我可以顯示文本和ID，但我不能顯示頁面loc – ZgrKARALAR

很高興知道@邁克爾。我真的不知道Angular會自動完成。在製作Ajax請求時不解析JSON是常見的錯誤，這就是爲什麼我提到了JSON.parse。謝謝！ – alvarodms

AngularJS Json列表

回答

相關問題