ahmdabos ahmdabos - 1 month ago 9
AngularJS Question

getting data from complex JSON using angularjs

I'm trying to get JSON data from a REST API link using AngularJS,
but I get confused when I start pulling the data in the view after I make an HTTP GET call in the controller.

It's complex JSON: objects inside objects inside arrays inside objects inside objects inside arrays.

I don't have the ability to change this hierarchy in the REST API.

I tried to do it the following way, but it returns nothing.

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get('http://citysdk.dmci.hva.nl/CitySDK/events/search?category=festival')
.then(function(response) {
$scope.myData = response.data;
});
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="data in myData">
<td>{{data.event.location.point.point.posList}}</td>
<td>{{data.event.location.point.point.srsName}}</td>
<td>{{data.event.location.point.term}}</td>
<td>{{data.event.location.relationship.targetPOI}}</td>
<td>{{data.event.location.relationship.term}}</td>
<td>{{data.event.location.relationship.base}}</td>
<td>{{data.event.label.term}}</td>
<td>{{data.event.label.value}}</td>
<td>{{data.event.label.lang}}</td>
<td>{{data.event.description.value}}</td>
<td>{{data.event.description.lang}}</td>
<tr>
</table>
</div>
</body>
</html>

Answer

My previous post about CORS was incorrect. the headers were present.

You had two mistakes.

    $scope.myData = response.data;

needs to be

    $scope.myData = response.data.event;

The second problem is you were accessing the returned data incorrectly.

    <td>{{data.location.point[0].Point.posList}}</td>
    <td>{{data.location.point[0].Point.srsName}}</td>
    <td>{{data.location.point[0].term}}</td>
    <td>{{data.location.relationship[0].targetPOI}}</td>
    <td>{{data.location.relationship[0].term}}</td>
    <td>{{data.location.relationship[0].base}}</td>
    <td>{{data.label[0].term}}</td>
    <td>{{data.label[0].value}}</td>
    <td>{{data.label[0].lang}}</td>
    <td>{{data.description[0].value}}</td>
    <td>{{data.description[0].lang}}</td>

Use the console.log() to print out the response and double check you are accessing the correct variables.

Comments