Angular push service object data to array

Question

I have created one service to load all the files data:

readonly file= new BehaviorSubject(null);
readonly file$ = this.pnlNumbers.asObservable();

getFile(filename: string) {
  this.file.next(null);
  this.subscriptions.push(this.http.get(`/file/${filename}).subscribe(data => {
  this.file.next(data);
}, error => {
  this.file.next(error);
}));

}

This will return an single object with file information ,eg:

{
 id:0001,
 name: 'test_file.txt',
 ...
}

I have created ab function to store all the result data that comes from the getFile service:

getAllFiles(): any {
 let filesList= [];
 this.activeFilesList.forEach(fileName => {
    this.fileService.getFile(fileName);
  });
  this.fileService.file$.subscribe((data) => {
    if (data) {
      fileList?.push(data);
    }
  });
return filesList;

}

I don't know why , but "typeOf this.getAllFiles()" will return an Object instead of Array, for that reason I cant access the indices of filesList[], eg on chrome console:

[]
  1:{id:0001,name:'test.file.text'}
  2:{id:0002,name:'test.file2.text'}
  3:{id:0003,name:'test.file3.text'}

the filesList.lenght = 0

I need that this filesList[] be a type of Array instead of an Object.

nate-kumar · Accepted Answer · 2022-10-09 19:32:15Z

Few things here:

Firstly, a common JavaScript gotcha is the return type of an array is in fact 'object'

typeof [] // 'object'
typeof ['any array contents'] // 'object'

i.e. typeof is an ineffective heuristic for determining whether the return type of this function is an array. Use Array.isArray instead:

Array.isArray(['any array contents']) // true
Array.isArray({ someKey: 'someValue' }) // false

Secondly, am I safe to assume that this line

readonly file$ = this.pnlNumbers.asObservable();

Should instead be

readonly file$ = this.file.asObservable();

otherwise the rest of the code does not really have much relevance, as this.pnlNumbers is not referenced anywhere else

Thirdly, it appears that you are trying to combine the results of multiple asynchronous streams (in this case http calls) into a single array to be returned from getAllFiles(). As these are asynchronous, they by nature take some time to return their data. While this data is being returned, the rest of your synchronous function code will run, and that means your return statement will be hit before the http calls have returned their data.

In its current state, getAllFiles() is simply returning the value of filesList before any of the http calls have returned their values, i.e. the default value it was assigned, [].

What you will need to do instead is to

Use an RxJs operator to combine those independent http streams into one stream
Subscribe to this combined stream and handle the combination of values as is appropriate for the operator being used

An example implementation using forkJoin is here, but depending on your use case, other joining operators like concat, mergeMap, combineLatest etc may be preferable:

type FileType = { id: number; name: string }

getAllFiles$(): Observable<FileType[]> {
  const filesListObservables: Observable<FileType>[] =
    this.activeFilesList
      .map(
        (fileName: string) => this.fileService.getFile(fileName)
      );
  const filesList$: Observable<FileType[]> = forkJoin(filesListObservables);
    
  return filesList$;
}

getAllFiles(): void {
  this.getAllFiles$()
    .subscribe(
      (allFiles: FileType[]) => {
        console.log(allFiles) // [{id:0001,name:'test.file.text'},...]
      }
    )
}

Collectives™ on Stack Overflow

Angular push service object data to array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related