Angular REST data not displaying in view correctly

Question

Heres the Angular app:

app.controller("AppCtrl", function ($scope, $http, $q) {

$q.all([
$http.get('http://private-bc4b97-commutertransport.apiary-mock.com/bus'),
$http.get('http://private-bc4b97-commutertransport.apiary-mock.com/otm')
 ]).then(function(results) {
 $scope.network = results[0].data;
 $scope.data = results[1].data

})

});

the HTML:

<div class="main" ng-controller="AppCtrl">
<h1>{{network.test1}}</h1>
<h1>{{data.test2}}</h1>
</div>

And the basic JSON (in different URL to each other of course):

"test1" : "first test",
"test2" : "second test",

Now the console is showing the HTTP being called successfully but the data isn't being displayed in view... Not really sure whats wrong?

Console log screen:
enter image description here

enter image description here

Can you attach a screenshot of the network request in your browser with the JSON payload returned from the API? — Jesse Carter
– Jesse Carter, Commented Jul 17, 2015 at 0:27
Use debugger to see what the returned result type is. If headers are not correct JSON is not parsed automatically, so you have a string. In this case the expression in view can't find any nested .test1 or .test2 because data and network are strings — Kirill Slatin
– Kirill Slatin, Commented Jul 17, 2015 at 0:28
!. Read this stackoverflow.com/tags/javascript/info 2. Learn to debug. 3. Profit — Jan
– Jan, Commented Jul 17, 2015 at 0:32
Are you sure results is an array? Have you tried with only results.data? — Eric Martinez
– Eric Martinez, Commented Jul 17, 2015 at 0:48

kanzelm3 · Accepted Answer · 2015-07-17 00:33:49Z

0

Try logging your response in the console; in my experience with Angular's $http service (when using the .then method), response data is wrapped in a response object and is returned in the data property of that object:

$scope.network = results[0].data;
$scope.data = results[1].data;

edited Jul 17, 2015 at 0:33

answered Jul 17, 2015 at 0:26

kanzelm3

5353 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Whirlwind990 Over a year ago

so what would I be console logging, 'results'?

kanzelm3 Over a year ago

Just do like console.log('results', results[0], results[1]) and what you should see is an object that has a data property.

Whirlwind990 Over a year ago

managed to fix it, error with the JSON :P anyway thanks for the help bro, I know you helped me yesterday so thanks again

Whirlwind990 Over a year ago

was going through that angular app again today and part of your syntax got me thinking so I thought I may as well ask, when you're calling $scope.network = results[0].data I was thinking of calling an array so I would put $scope.network = results[0].networkupdate instead (networkupdate being the name of the array), from my understanding. I Tried this method, to no success, so is this incorrect under a '.then' method?

kanzelm3 Over a year ago

No, everything that comes back in your response will be nested under data. So, if the 'networkupdate' property is an array that's returned in your response data, you would set $scope.network = results[0].data.networkupdate.

Collectives™ on Stack Overflow

Angular REST data not displaying in view correctly

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related