CODEWITHSUNDEEP
javascriptangulartypescriptobservable
Pedro Mendes
Pedro Mendes

Reputation: 99

Angular push service object data to array

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.

Upvotes: 0

Views: 311

Answers (1)

nate-kumar
nate-kumar

Reputation: 1771

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

  1. Use an RxJs operator to combine those independent http streams into one stream
  2. 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'},...]
      }
    )
}

Upvotes: 1

Related Questions