Access to element of array is undefined

[mangeleptico]

When i try to access to any element of authors array, the response is undefined, only works when i change to books table and then return to authors. This happends with all get a collection of resources

example:
` public authors: DocumentCollection;

public constructor(private route: ActivatedRoute, private authorsService: AuthorsService, booksService: BooksService) {
    route.queryParams.subscribe(({ page }) => {
        authorsService
            .all({
                include: ['books'],
                sort: ['name'],
                page: { number: page || 1 },
                ttl: 3600
            })
            .subscribe(
                authors => {
                    this.authors = authors;
                },
                error => console.error('Could not load authors :(', error)
            );
    });
}

ngOnInit(): void  {
     console.log(this.authors.data); // No problem
    console.log(this.authors.data[0]); // Here the value is undefined
}`

[pandabamboo90]

@mangeleptico

I had the same problem before :)
You can use filter operator from RxJS to get the resources when it has been "built & loaded" before assign it to your data variable

    authorsService
      .all({
        include: ['books'],
        sort: ['name'],
        page: { number: page || 1 },
        ttl: 3600
      })
      .pipe(
        filter(authors => authors.loaded), // Only get the response when every resources are loaded !
      )
      .subscribe(
        authors => {
          this.authors = authors;
        },
        error => console.error('Could not load authors :(', error)
      );

[mangeleptico]

Thanks! its works for me.
It's necessary too use a conditional of authors in html if i want to print authors data on screen to avoid asynchronous errors

[niskah-energies]

Hi,

If I try to user filter(), I have an error:

TypeError: filter is not a function. (In 'filter(function (authors) { return authors.loaded; })', 'filter' is undefined)