Issue with component initialization Angular

Question

hey people I'm having a little issue. I'm trying to pull some Flickr images from their api and for a reason I'm not aware of, the list is been populated not at the time I wish. I will post my code to explain better.

this is my code:

component:

export class MainComponent implements OnInit {

  myArray: Item[] = [];
  randomItem: Item;

  constructor(private dataService: DataService) {
  }

  refresh(){
    console.log("[refresh()]:",this.myArray.length)
    var selected = Math.floor(Math.random() * this.myArray.length);
    this.randomItem = this.myArray[selected];
    this.myArray.splice(selected,1);

  }

  ngOnInit() {
    this.dataService.getImages().subscribe(res => {
      this.myArray = res.items;
      console.log("[ngOnInit]:" ,this.myArray.length)
    })

    console.log("[ngOnInit 2]:",this.myArray.length)
    if(this.myArray.length>0){
      var myInterval = setInterval(this.refresh(), 1000);
    }else{
      clearInterval(myInterval);
    }
    }

}

Service:

export class DataService {


 imagesUrl = 'https://api.flickr.com/services/feeds/photos_public.gne?format=json&nojsoncallback=1';
  myArray:Item[]=[];
  randomItem:Item;

  constructor(private http: HttpClient) {
  }

  getImages(): Observable<Flickr>{
    return this.http.get<Flickr>(this.imagesUrl);
  }

}

output:

[ngOnInit 2]: 0

[ngOnInit 1]: 20

As you see in the component code, my Interval is never executed. looks like the array has no time to initialize itself. why its not working? what can I do to make that work?

that's not duplicated since the problem is the interval doesn't work either way.

Please read up on async in JS generally and RxJS specifically; the whole point of using callbacks is that the value is not available synchronously. — jonrsharpe, Oct 12 '18 at 22:04
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — jonrsharpe, Oct 12 '18 at 22:05

Sunil Singh · Accepted Answer · 2018-10-12T22:23:49.477

2

You are executing the code before you gets the response. Your interval code needs to be moved inside response block -

private interval;

  refresh(){
    console.log("[refresh()]:",this.myArray.length)
    var selected = Math.floor(Math.random() * this.myArray.length);
    this.randomItem = this.myArray[selected];
    this.myArray.splice(selected,1);

    if(this.myArray.length == 0){
       clearInterval(this.interval);
    }
  }

    ngOnInit() {
        this.dataService.getImages().subscribe(res => {
          this.myArray = res.items;
          console.log("[ngOnInit]:" ,this.myArray.length)

           this.interval = setInterval(() => {
              this.refresh(); 
           }, 1000);

        })

    }

edited Oct 12 '18 at 22:23

answered Oct 12 '18 at 22:05

Sunil Singh

11,001
2
27
48

thanks for help. its not working, I mean the interval is not executed. why is that? @Sunil Singh – rio Oct 12 '18 at 22:10
Actually you don't even need `setInterval`. You can call `this.refresh()` directly. Do you have any specific scenario to use `setInteval` ? – Sunil Singh Oct 12 '18 at 22:17
I need it to run every 5 seconds. and when the length reach to 0 it should stop @Sunil Singh – rio Oct 12 '18 at 22:17

Issue with component initialization Angular

1 Answers1