HttpClient request in loop Angular Resolver

Question

I have my resolver.ts

return this.wardrobeStateServ.init(this.categoryIndexes).pipe(take(1),
  map((value) => value));

and my init function

    init(categoryIndexes: number[]): Observable<boolean> {
    if (this.firstSubWardrobeSubject.value === null) {
        return this.http.get(`${AppConstants.itemsByCategoriesUrl}${categoryIndexes[0]}&include_images=true`).pipe(switchMap((firstResponse: any) => {
            this.firstSubWardrobeSubject.next(firstResponse.data);
            return this.http.get(`${AppConstants.itemsByCategoriesUrl}${categoryIndexes[1]}&include_images=true`).pipe(switchMap((secondResponse: any) => {
                this.secondSubWardrobeSubject.next(secondResponse.data);
                return this.http.get(`${AppConstants.itemsByCategoriesUrl}${categoryIndexes[2]}&include_images=true`).pipe(switchMap((thirdResponse: any) => {
                    this.thirdSubWardrobeSubject.next(thirdResponse.data);
                    if (categoryIndexes[3]) {
                        return this.http.get(`${AppConstants.itemsByCategoriesUrl}${categoryIndexes[3]}&include_images=true`).pipe(map((forthResponse: any) => {
                            this.forthSubWardrobeSubject.next(forthResponse.data);
                            return true;
                        }))
                    } else { return of(true) }
                }))
            }))
        }))
    } else { return of(true) }
}

Do you have any idea to simplify my code please? I want to have an array where I can loop with my http request.

But I tried with forkJoin but there is an asyn issue because result is always null

So now, this function is working but not so clean.

Help me please