Question: i got a Angular components that in the init execute 2 funcions, one of them charge a array and the second one takes the values of thata array and execute a service.

The problem is that the second funcion execute before the first so the array is not charge and the second funcion returns error.

This is the code:

```
import { fromEvent, Subscription } from 'rxjs';
  ngOnInit(): void {
            this.getProducts();
            this.getLoans();
        }

getProducts() {
        this.clientService.getClientProducts(this.clientId).subscribe(
            (res) => {
                if (res.success) {
                    this.products = res.data;
                    console.log('Obtiene productos');
                    console.log(this.products);
                } 
            }
        );
    }

    getLoans() {
        console.log('Obtiene loans');
        console.log(this.products);
        this.products.forEach((element) => {
            if (element.id == '4') {
                this.clientService.getClientLoan(this.clientId).subscribe(
                    (res) => {
                        if (res.success) {
                            this.loans.push(res.data);
                        } else {
                            this.hasErrorOnLoans = true;
                        }
                    },
                );
            }
        });
    }

```

and the console log, can we see that the log that the first functions execute before:

[console log](https://i.stack.imgur.com/Uz4TY.png)

Sorry for my inglish! and thanks.

Answer: 
The problem is that you have not synchronize the two asynchronous call. The simplest thing you can do is call the second one function when the first one get the data, in this way

```
getProducts() {
        this.clientService.getClientProducts(this.clientId).subscribe(
            (res) => {
                if (res.success) {
                    this.products = res.data;
                    this.getLoans();
                } 
            }
        );
    }

```

In this way when you call getLoans() function products array is filled.
*Hope below snippet helps*

```
import { fromEvent, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

 ngOnInit(): void {
        getProducts().pipe(
        map(products => products.filter(p => p.id == '4')),
        tap(filteredProducts => {
          getLoans(filteredProducts)
        })
         ).subscribe();
    }

getProducts(): Observable<ClientProduct> {
      return this.clientService.getClientProducts(this.clientId);
}

getLoans(filteredProducts) {
    filteredProducts.forEach((element) => {
      this.clientService.getClientLoan(this.clientId).subscribe((res) => {
          if (res.success) {
              this.loans.push(res.data);
          } else {
              this.hasErrorOnLoans = true;
          }
      });
  });
}

```