I want to show one json that will be displayed on my page using AngularJS. But Json has an extra object that I tried something but didn't work. I can show the text and id, but it does not work lat and lon in posibiton name tag.I don’t know how to show this data in my list
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
}
}
]
source
share