0

I have a API call which fetches me a Random Image. I am trying to call following method and trying to use the variable returned, but it's only givig me empty results.

  fetchRandomArt():RawImportData<Artdata>{

    var tempRand:RawImportData<Artdata> = new  RawImportData<Artdata>();
    this.dataService.getRandomArt<RawImportData<Artdata>>().subscribe(
      (res: RawImportData<Artdata>) => {
        if(res){
          tempRand = res;
          this.isLoading=false;
        }
      },
      err => {throw("Can't connect to Server.")}
    );
    console.log("tempRand");
    console.log(tempRand);
    return tempRand;

  }

However i tested that API is indeed giving me result (inside if(res) diplays data), but i am not able to use that data outside the function.

Also, Is it possible to self execute this fuction after every 5 seconds?

EDIT:

I just noticed, the inner function is executing later, 

out tempRand
RawImportData {}
in tempRand
{records: Array(1), pagination: {…}}

I know i can solve this by calling and subscribing n times, but i want to use values returned by this function only as i want it to self call.

UPDATE

Just want to update that the links tagged to this question do not answer this question, however following method does,

  public async fetchRandomArt():Promise<RawImportData<Artdata>>{
    const data = await this.dataService.getRandomArt<RawImportData<Artdata>>().toPromise();
    this.isLoading=false;
    console.log(data); 
    return data;
  }
Mercurial
  • 3,615
  • 5
  • 27
  • 52
  • As for your update, the accepted answer in duplicate here https://stackoverflow.com/a/14220323/6294072 presents the `async await` option :) – AT82 Nov 01 '19 at 12:25
  • But i am not able to use the results in my HTML! It's saying, `` – Mercurial Nov 01 '19 at 12:31
  • This is how i'm using, `*ngFor="let art of fetchRandomArt().records | async"` – Mercurial Nov 01 '19 at 12:33
  • I don't know what you have changed currently, but as is it sits `fetchRandomArt()` returns nothing, as this is asynchronous. Also `async` pipe expects an Observable. – AT82 Nov 01 '19 at 13:13
  • I suggest you read the documentation to understand this, this will answer your questions: https://angular.io/tutorial/toh-pt6#asyncpipe – AT82 Nov 01 '19 at 13:16
  • Its a `Promise`? – Mercurial Nov 01 '19 at 13:24
  • 1
    no it's not, it's now a an object (assumingly). Store it then in a variable named as you wish, for example `randomArt` and iterate `*ngFor="let art of randomArt.records"`. Thoiugh, I prefer embracing observables instead of the `async await` approach. Observables are so versatile and have amazing operators, so I suggest you dig into those at some time and then you can see the benefits :) – AT82 Nov 01 '19 at 13:33
  • Thanks man, you've been of great help for last 2 days! (edit) I just wanted myself a sweet slideshow by calling this async function evey 5 second, looks like i have to go back to using multiple fixed observables. – Mercurial Nov 01 '19 at 13:52
  • You are welcome for the help. Hard to help further on your slideshow-thing when not seeing code. There would probably be a nice observable solution with rxjs operators for that (is just a guess!), but cannot give any tips without seeing code. You can consider asking a new question if there is some specific issue that you need solved. – AT82 Nov 01 '19 at 14:08
  • 1
    @AJT82 Sorry for being totally out of context, but I really want you to see I made the slideshow :) mgoart.web.app (scroll down the home page) – Mercurial Nov 01 '19 at 22:40
  • Great! One does always feel like a champion when accomplishing something that been struggling with! :) :) – AT82 Nov 02 '19 at 08:50

0 Answers0