CODEWITHSUNDEEP
javascriptnode.jsrxjs
Federico Vitale
Federico Vitale

Reputation: 390

Listr: Observable on array map

I want to download a group o files and reporting the progress using Listr and RxJs but when i run it loops and display incorrect index of the array.

That's the code of the task [source code]:

{
        title: 'Downloading...',
        task: (ctx) => rx.Observable.create((observer) => {
            const count = ctx.photos.length;
            const urls = ctx.photos.map((photo) => photo.urls.raw)
            urls.forEach(async (url, index) => {
                let data = await download(url);
                if ( index !== count - 1 ) {
                    observer.next(index);               
                } else {
                    observer.complete()
                }
            })
        })
}

That's the result (is not the exact same function, but the problem is the same)

result

Upvotes: 0

Views: 199

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191789

.forEach will run synchronously even though the callback to it is using async/await. To be honest I think this is a better approach since it allows multiple downloads to happen at once and you don't have to depend on the order of the downloads. If you want this to display in order you can just maintain your own counter:

let downloadedCount = 0;
urls.forEach(async (url, index) => {
  let data = await download(url);
  if ( index !== count - 1 ) {
    observer.next(++downloadedCount);               
  } else {
    observer.complete()
  }
})

Upvotes: 1

Related Questions