Angular: promise error without a promise being used in a subscription

Question

I have a material design table and I wrote custom functions to load the data and extract the objects from the JSON array object.

I have the following code:

  public getDocumentList() {
    return this.http.get(this.getDocumentUrl, this.httpOptions)
    .subscribe(
      documentResponse => {
        for (let i = 0; i > Object.keys(documentResponse).length; i++){
          console.log(Object.keys(documentResponse));
          console.log("documentResponse:");
          console.log(documentResponse);
          console.log(of(documentResponse[i]).pipe(pluck('soap:Envelope', 'soap:Body', 'ns2:getDocumentsResponse', 'return')));
          this.documentList$ = of(documentResponse[i]).pipe(pluck('soap:Envelope', 'soap:Body', 'ns2:getDocumentsResponse', 'return'));
        this.documentList$.subscribe(x => this.documentListArray.push(x));
        console.log("Doklist", this.documentListArray)
      }
      this.setDokumentStatus();
       },
       error => {
        alert('Following error happened:' + ' ' + error['statusText']);
        console.log('There was an error: ', error);
      });
  }

The following public function above fills documentListArray with the required objects...

But this semi-random error gets thrown:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length')
    at WorkDocumentComponent.<anonymous> (work-document.component.ts:139:6

The last line of this code is where the error happens (before the bracket obviously):

async FillElementDataArray() {
    ELEMENT_DATA.length = 0;
    this.dataSource.connect().next(ELEMENT_DATA);

    let add_WorkDocument = {} as WorkDocument;
    console.log(this.DataService.documentListArray);
    let docsForMetadata;

    // this below is undefined yo
    for (let i = 0; i < this.DataService.documentListArray[0].length; i++)
    {

...which is VERY strange.

Is this an async and sync function issue?

• How do I fix this?
• Why is it still undefined and I cannot console.log it? EDIT: I can console.log it IF I put the console.log before the log loop.

P.S. my documentResponse looks like this:

[
{
"soap:Envelope": {
"soap:Body": {
                "ns2:getDocumentMetaDataResponse": {
                    "return": {
                        "items": [
{
"key": "blah",
"values": "blablabla"
and so on...
}
]

Answer 1

What you need is called optional chaining and nothing to do with any of either promise or subscription.

If you take a look at the line that error claims and read the error itself, this.DataService.documentListArray[0] value has no data at some point so that, reading length property for it returns an error.

Moreover the error is common when tried to read a property of an undefined value, hence the solution is as easy as below;

for (let i = 0; i < this.DataService.documentListArray[0]?.length; i++)
{

}

Answer 2

I have the suspicion that by the time FillElementDataArray is called, getDocumentList hasn't loaded yet.

RxJS is designed to work with asynchronous flows, but you need to structure your code in a way that you can compose the data down.

public getDocumentList() {
  this.documentList$ = this.http.get(this.getDocumentUrl, this.httpOptions).pipe(
    map(documentResponse => {
      // Assuming documentResponse is an array
      return documentResponse.map(
        // RxJS deprecates pluck in favour of just optional chaining
        x => x?.['soap:Envelope']?.['soap:Body']?.['ns2:getDocumentsResponse']?.['return']
      )
    }),
    // Not sure why this call is needed
    tap(() => this.setDokumentStatus())
  )
}

Then on the async function you can consume this observable with lastValueFrom, which gives you a promise with the last value the observable emitted before completing (in this case it will emit one value and complete)

async FillElementDataArray() {
  ELEMENT_DATA.length = 0;
  this.dataSource.connect().next(ELEMENT_DATA);

  let add_WorkDocument = {} as WorkDocument;
  const documentListArray = await lastValueFrom(this.DataService.documentList$);
  let docsForMetadata;

  // this below is undefined yo
  for (let i = 0; i < documentListArray.length; i++)
  {

Not sure if this answer solves your problem, because this needs more... ideally getDocumentList() already returns the observable. And also something to keep in mind is that observables are lazy... if you'd like to have getDocumentList start loading before someone subscribes you'll need to shareReplay that observable and create a subscription (which is also not elegant)