angularjs Array not regnized by ng-repeat

Question

I'm writing an API on NodeJS (server part) and AngularJS (view part) which asks another API (NodeJS too) to get an object containing stuff including an array of pictures. I'm interested by the pictures in this array.

I wrote a for loop to get names of all pictures contained in my array of pictures in my object:

for(j=0; j<reference.pictures.length; j++){
   self.url ="http://localhost:3000/api/pictures/"+reference.pictures[j].picture;
   self.urlArray = urlArray.push(self.url);
 }
 console.log(urlArray);

And I wrote for my view an ng-repeat:

<div ng-repeat="url in urlArray">
  <img ng-src="{{url}}"  width="150px"/>
  <br/>
</div>

My problem ? I can see my urls contained in my array of urls in log when I console.log BUT I can't see 'em in my view with my ng-repeat. I guess my ng-repeat isn't perfect but still don't know why Any ideas ?

To understand, I want to show all my pictures contained in my array so FIRST I did that:

controller:

    self.url = "http://localhost:3000/api/pictures/"+reference.pictures[j].picture;

view:

<div ng-repeat="picture in reference.pictures">
  <img ng-src="{{url}}"  width="150px"/>
  <br/>
</div>

and in result I have the good number of pictures, BUT the URL used to get pictures is the last one which is assigned exiting the loop, so all my pictures are the same (the last one), this is why I get the idea to make an array with all my different URL

score 0 · Answer 1 · answered Jul 19 '18 at 15:08

0

I assume that you're referring to $scope using self. If that's the case, the main problem with your code is this assignment:

self.urlArray = urlArray.push(self.url);

Array#push returns the length of the updated array, so self.urlArray will always contain an integer. And you cannot loop over an integer using ng-repeat in AngularJS. To solve the issue, just remove the assignment:

urlArray.push(self.url);

answered Jul 19 '18 at 15:08

31piy

23,323
6
47
67

Thanks for replying Yes u'r right self =$scope But when I remove the assignment, I still don't have my view updated with my pictures, this is why I believed that my ng-repeat isn't correct But thx, now I know why I always had an integer when I console.log urlArray ;) – Nounnoune Jul 19 '18 at 15:19

score 0 · Accepted Answer · answered Jul 19 '18 at 15:26

You lack to construct urlArray as an array of object literals, i.e :

[
  { url: 'someUrl' }, 
  { url: 'anotherUrl' },
  ...
]

So do this instead :

self.urlArray = [];
for(j=0; j<reference.pictures.length; j++) {
  self.urlArray.push({
    url: "http://localhost:3000/api/pictures/"+reference.pictures[j].picture
  })
}

...

<div ng-repeat="url in urlArray">
  <img ng-src="{{ url.url }}" width="150px">
  <br>
</div>

score -1 · Answer 3 · answered Jul 19 '18 at 15:16

There are some nuances with prototypical inheritance in Angular - check out this post for a more in-depth explanation.

Basically, your ng-repeat can't access the urlArray that you want because a new variable is created in childScope that overshadows the same variable in parentScope. If you were to instead make urlArray a property of an object, that should fix your issue.

angularjs Array not regnized by ng-repeat

3 Answers3