i created my backend and the api-controllers are working fine. In the frontend, i already created the models for my application:

book.model.ts

export class Book {
id : number;
autor: string;
title: string;
returnDate: Date;
numberOfExtensions: number;
cardId:number;
card?: Card;
status?:string;
}

card.model.ts

export class Card {
id : number;
validityDate: Date;
locked: boolean;
userId: number;
user?: User;}

and user.model.ts

export class User {
id : number;
firstName: string;
lastName: string;
balance: number;}

In the frontend service, i GET the data from api with the following:

export class DataService {
constructor(private http: HttpClient) { }

  readonly baseURL = "https://localhost:44302/api";
  books: Book[];
  users: User[];
  cards: Card[];
  postId: number;

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  async getBooks() {
    await this.http.get(this.baseURL   '/books')
      .toPromise()
      .then(result => this.books = result as Book[]);
  }
  async getCards() {
    await this.http.get(this.baseURL   '/cards')
      .toPromise()
      .then(result => this.cards = result as Card[]);
  }
  async getUsers() {
    await this.http.get(this.baseURL   '/users')
     .toPromise()
      .then(result => this.users = result as User[]);
  }
  async getData() {
    await this.getBooks();
    await this.getCards();
    await this.getUsers();
  }

Is it best practice to receive all SQL data first?

Next step is mapping. For Example for each book, i want to save the card with the fitting ID (Pseudocode):

book.card = card where book.cardId === card.id

and for every card i want the owner-user of the card:

card.user = user where card.userId === user.id

I would appreciate any help! thanks alot

CodePudding user response：

One possible solution is to use forkJoin. This will be fired when all the observables are completed. You can manipulate your data after all the downloads are completed.

export class DataService {
constructor(private http: HttpClient) { }

  readonly baseURL = "https://localhost:44302/api";
  books: Book[];
  users: User[];
  cards: Card[];
  postId: number;

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  getBooks() {
    return this.http.get(this.baseURL   '/books');
  }
  getCards() {
    return this.http.get(this.baseURL   '/cards');
  }
  getUsers() {
    return this.http.get(this.baseURL   '/users');
  }
  getData() {
    const observableList: Observable<any>[] = [];
    
    observableList.push(getBooks());
    observableList.push(getUsers());
    observableList.push(getCards());
    
    forkJoin(observableList).subscribe(resultList => {
      this.books = resultList[0] as Book[];
      this.users = resultList[1] as User[];
      this.cards = resultList[2] as Card[];
      
      // Do "book.card = card where book.cardId === card.id"
      const cardMap: Map<number, Card> = new Map();
      for (const card of this.cards) {
        cardMap.set(card.id, card);
      }
      for (const book of this books) {
        const card = cardMap.get(book.cardId);
        book.card = card;
      }
      
      // Do "card.user = user where card.userId === user.id"
      const userMap: Map<number, User> = new Map();
      for (const user of this.users) {
        userMap.set(user.id, user);
      }
      for (const card of this.cards) {
        const user = userMap.get(card.userId);
        card.user = user;
      }
    });
  }