getting data from complex JSON using angularjs

Question

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>

d3l33t · Accepted Answer · 2016-10-28 18:03:33Z

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.

Collectives™ on Stack Overflow

getting data from complex JSON using angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related