I’m performing a $http
request to the 500px API for a set of popular photos. The response object is being returned successfully, and I’m having trouble pushing the returned photo items to the view.
My controller code looks like this:
meanApp.controller 'SearchController', ['$scope', '$http', 'Global', ($scope, $http, Global) ->
$scope.global = Global
$scope.photos = []
$scope.submit = ->
if $scope.text
$http.get("https://api.500px.com/v1/photos?feature=popular").success (data) ->
$scope.photos.push data
]
The response object (as JSON) looks like this (trimmed down for brevity):
{
"current_page":1,
"total_pages":1449,
"total_items":7244,
"photos":[
{
"id":58494612,
"user_id":1795149,
"name":"Van Gogh!!!!"
},
{
"id":49566952,
"user_id":1795149,
"name":"Autumn touch!"
},
{
"id":49527034,
"user_id":2670757,
"name":"Untitled"
},
{
"id":39374598,
"user_id":3669660,
"name":"The Wild Cannot Be Tamed Nor The Rednecks in it! "
},
{
"id":28303657,
"user_id":2843749,
"name":"Main road to go to the moon"
}
]
}
My view looks like this:
<h1>Photo search</h1>
<form ng-submit="submit()" ng-controller="SearchController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text">
<input type="submit" id="submit" value="Submit">
</form>
<ul>
<li ng-repeat="photo in photos.photos">{{photo.name}}</li>
<li ng-hide="photos.length">No photos</li>
</ul>
The current behaviour is that the <ul>
does not update. The expected behaviour is for the photo
items to push to the <li>
s. I have read about potentially needing to use $apply
, but this hasn't given me any luck either.
$scope.photos.push data.data
– Marc Kline May 24 '14 at 1:26console.log(data.data)
is giving meundefined
. – gosseti May 24 '14 at 1:42