AngularJS $scope.push not updating the view from a $http data response

Question

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.

Unfortunately that didn't seem to do it, and console.log(data.data) is giving me undefined. — gosseti
– gosseti, Commented May 24, 2014 at 1:42

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Update

The problem is that your ng-repeat is outside of the scope of SearchController

<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> <!-- end SearchController -->

<ul>
  <!-- Outside of SearchController's scope -->
  <li ng-repeat="photo in photos.photos">{{photo.name}}</li> 
  <li ng-hide="photos.length">No photos</li>
</ul>

so it doesn't have access to the value of photos.photos.

As a solution, you can wrap your entire "Photo search" section, including the search and the results, under the scope of one controller.

Demo

You will probably also have to consider my previous response ...

Previous response

It seems that following the response to your request, by pushing the results to $scope.photos as an array, its contents might look like:

[{ current_page: ..., photos: [...], total_items: ..., totalpages: ...}]

If that's the case, you need to access it with an expression that looks like:

<li ng-repeat="photo in photos[0].photos">

Perhaps though you're really meaning to assign data to $scope.photos like

$scope.photos = data

In this case, your expression might work as you currently have it.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 24, 2014 at 1:55

Marc Kline

9,4091 gold badge35 silver badges36 bronze badges

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

3 Comments

gosseti Over a year ago

I didn't have any luck trying your suggestions (in a combination of both too). Could it be related to the fact that each photo in photos: [...] has an index?

Marc Kline Over a year ago

I thought photos: [] was an array. Sounds like it's an object with numeric keys? Can you replace the abbreviated response in your question with a full JSON output?

gosseti Over a year ago

Looks like I’ve confused myself a bit here. I've run console.log(angular.toJson(data)) and have updated the response from that above.

Isuru Walpola · Accepted Answer · 2016-02-15 15:47:29Z

0

First make sure that your response is available for use as a Javascript object. Try to

console.log(data);
console.log($scope.photos);

in the success function of your $http.get, and see if data is a JavaScript object or an array of objects (in the browser's JS Console). If its displayed as a string, you need to JSON parse the response using

JSON.parse(response);

before pushing to the array. Note that the thing you are pushing to the $scope.photos array has to be a photo object. console.log($scope.photos) should show an array of objects. Finally, after pushing data, you need to run

$scope.apply();

answered Feb 15, 2016 at 15:47

Isuru Walpola

916 bronze badges

Collectives™ on Stack Overflow

AngularJS $scope.push not updating the view from a $http data response

2 Answers 2

Update

Previous response

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

Previous response

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related