How to get 2 api objects at once?

Question

Angular

I don’t know how correct it is to form json like this on the server

import { MenuService } from './../shared/services/menu.service';
import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
  ParseIntPipe,
  DefaultValuePipe,
  Query,
} from '@nestjs/common';
import { Albums as AlbumsModel } from '@prisma/client';
import { AlbumsService, CreateAlbumDto, UpdateAlbumDto } from './index';

@Controller('albums')
export class AlbumsController {
  private album = [];
  private menu = [];

  public constructor(
    private readonly albumsService: AlbumsService,
    private readonly menuService: MenuService,
  ) {}

  @Post()
  public create(@Body() createAlbumDto: CreateAlbumDto) {
    return this.albumsService.create(createAlbumDto);
  }

  @Get()
  public async findAll(
    @Query('skip', new DefaultValuePipe(0), ParseIntPipe) skip: number,
    @Query('take', new DefaultValuePipe(9), ParseIntPipe)
    take: number /*: Promise<AlbumsModel[]> {
    return await this.albumsService.findAll({
      skip,
      take,
    });*/,
  ) {
    this.album = await this.albumsService.findAll({
      skip,
      take,
    });

    this.menu = await this.menuService.findAll();

    return {
      albums: this.album,
      menu: this.menu,
    };
  }

  @Get(':id')
  public findOne(@Param('id') id: string) {
    return this.albumsService.findOne(+id);
  }

  @Patch(':id')
  public update(
    @Param('id') id: string,
    @Body() updateAlbumDto: UpdateAlbumDto,
  ) {
    return this.albumsService.update(+id, updateAlbumDto);
  }

  @Delete(':id')
  public remove(@Param('id') id: string) {
    return this.albumsService.remove(+id);
  }
}

There is json

{
    "albums": [
        {
            "id": 1,
            "image": "http://placeimg.com/350/315",
            "countTrack": 2,
            "title": "Human Quality Manager"
        },
        {
            "id": 2,
            "image": "http://placeimg.com/350/315",
            "countTrack": 7,
            "title": "National Interactions Technician"
        },
        {
            "id": 3,
            "image": "http://placeimg.com/350/315",
            "countTrack": 4,
            "title": "Internal Communications Executive"
        },
        {
            "id": 4,
            "image": "http://placeimg.com/350/315",
            "countTrack": 1,
            "title": "National Assurance Manager"
        },
        {
            "id": 5,
            "image": "http://placeimg.com/350/315",
            "countTrack": 5,
            "title": "Investor Applications Manager"
        },
        {
            "id": 6,
            "image": "http://placeimg.com/350/315",
            "countTrack": 7,
            "title": "Legacy Communications Administrator"
        },
        {
            "id": 7,
            "image": "http://placeimg.com/350/315",
            "countTrack": 9,
            "title": "Corporate Identity Representative"
        },
        {
            "id": 8,
            "image": "http://placeimg.com/350/315",
            "countTrack": 11,
            "title": "Legacy Directives Coordinator"
        },
        {
            "id": 9,
            "image": "http://placeimg.com/350/315",
            "countTrack": 4,
            "title": "International Security Producer"
        }
    ],
    "menu": [
        {
            "id": 1,
            "path": "/",
            "title": "Home"
        },
        {
            "id": 2,
            "path": "/albums",
            "title": "Albums"
        },
        {
            "id": 3,
            "path": "/contact",
            "title": "Contact"
        }
    ]
}

How to get album and menu

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Album, AlbumService, Param } from '../../index';

@Component({
  selector: 'app-album',
  templateUrl: './album.component.html',
  styleUrls: ['./album.component.css'],
})
export class AlbumComponent implements OnInit {
  public albums?: Album[];
  public error: any;
  private params!: Param;

  constructor(
    private readonly albumService: AlbumService,
    private readonly route: ActivatedRoute
  ) {}

  public findAll() {
    this.albumService.findAll(this.params).subscribe(
      //(data: Album[]) => (this.albums = data),
      (data: any) => ((this.albums = data.albums), (this.menu = data.menu)),  //  работает
/*
(data: Album[], data: any) => (
        (this.albums = data.albums), (this.menu = data.menu) не работает
      ),
*/
      (error: any) => {
        this.error = error.message;
        console.error(error);
      }
    );
  }

  private getQueryParams(): void {
    this.route.queryParams.subscribe((params: Params) => {
      this.params = {
        skip: params['skip'],
        take: params['take'],
      };
    });
  }

  public ngOnInit(): void {
    this.getQueryParams();
    this.findAll();
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Album, Param } from '../index';

@Injectable({
  providedIn: 'root',
})
export class AlbumService {
  private apiUrl: string;

  public constructor(private readonly http: HttpClient) {
    this.apiUrl = 'http://localhost:8000/api/';
  }

  /*
  public findAll(params: Param): Observable<Album[]> {
    return this.http.get<Album[]>(
      `${this.apiUrl}albums/?skip=${params.skip}&take=${params.take}`
    );
  }
  */

  public findAll(params: Param): Observable<any[]> {
    return this.http.get<any[]>(
      `${this.apiUrl}albums/?skip=${params.skip}&take=${params.take}`
    );
  }
}

Answer 1

(data: any) => ((this.albums = data.albums), (this.menu = data.menu)),

What kind of strange syntax, what do you want?
Why not write normally?

(data: any) => {
    this.albums = data.albums;
    this.menu = data.menu;
}

public ngOnInit(): void {
this.getQueryParams();
this. findAll();
}

And by the way, this is not entirely true. The findAll method depends on this.params which is initialized in getQueryParams. And findAll will start executing before getQueryParams is executed.
They need to be stuffed into a pipe

this.route.queryParams
    .pipe(
        mergeMap((params: Params) => {
            this.params = {
                skip: params['skip'],
                take: params['take'],
            };
            return this.albumService.findAll(this.params)
        ),
        tap((data: any) => {
            this.albums = data.albums;
            this.menu = data.menu;
        }),
        catchError(error => {
            this.error = error.message;
            console.error(error);
            return EMPTY;
        })
    })
    .subscribe();