AngularJS Json list

AngularJS Json list

本文关键字：list Json AngularJS      更新时间：2023-09-26

我想在我的AngularJS页面中显示一个json列表。但Json有子对象，我尝试一些东西，但不工作。我可以显示文本和id，但它不工作晚和长在位置名称标签。我不知道如何在列表中显示这些数据

var app = angular.module("VarnaApp",[]);
app.service("varnaService",function($http, $q)
{
	var deferred = $q.defer();
	$http.get('api/station.json').then(function(data)
	{
		deferred.resolve(data);
	});
	this.getStations = function ()
	{
		return deferred.promise;
	}
	})
.controller ("varnaCtrl",function($scope,varnaService)
{
	var promise = varnaService.getStations();
	promise.then(function(data)
	{
		$scope.stations = data.data;
	});
})
<!doctype html>
<html lang="en">
<head>
	<title>AccioCode AngularJS Tutorial</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script src="js/app.js"></script>
</head>
<body>
<div class="mainContainer" data-ng-app="VarnaApp">
	<h1>Varna Stations</h1>
	<div data-ng-controller="varnaCtrl">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>loc</th>
				</tr>
			</thead>
<tbody>
	<tr data-ng-repeat="station in stations">
	<td>{{station.id}}</td>
	<td>{{station.text}}</td>
	<td>{{station.loc}}</td>
	</tr>
</tbody>
		</table>
		
	</div>
</div>
</body>
</html>

My Json Is 

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

我不太明白是什么车站。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>

您拥有的JSON是JSON 字符串。您必须首先将其解析为JavaScript对象:

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