Angular & RxJs: How to map json to Object Array

Question

I try to map a Json http request answer to an object array (User) using RxJs:

My Json data looks like:

{"@context":"\/cotabe\/api\/contexts\/User","@id":"\/cotabe\/api\/users","@type":"hydra:Collection","hydra:member":[{"@id":"\/cotabe\/api\/users\/1","@type":"User","id":1,"email":"a.a@gmail.com","firstname":"Aaa","lastname":"Ggg","phone":"0606060606","mobile":"0606060607","fullName":"Aaa Ggg","username":"a.a@gmail.com","roles":["ROLE_DEVROOT","ROLE_USER"],"password":"$argon2i","createdAt":"-0001-11-30T00:00:00+01:00","updatedAt":"-0001-11-30T00:00:00+01:00","deleted":false}],"hydra:totalItems":1}

I would like to extract from that a User[], with user model:

export class User {
  constructor(
    public id: number,
    public email: string,
    public firstname: string,
    public lastname: string,
    public phone: string,
    public mobile: string,
    public roles: string[],
  ) {}
}

In my user service I have:

export class UserService {

  private users: User[] = [];
  userSubject = new Subject<User[]>();

  constructor(private apiService: ApiService) { }

  emitUsers() {
    this.userSubject.next(this.users.slice());
  }

  getUsersFromRest() {
    this.apiService.getEntriesFromRest('users').subscribe(
    (data: User[])=>{
      this.users = data['hydra:member'];
    });
    this.emitUsers();
  }
}

with in an api service

  public getEntriesFromRest (option: string): any {
    return this.httpClient.get<any[]>(this.baseEndpoint + option);
  }

I know it is an rXjs operator stuff, but I did not manage to find the solution. Thank you for your help,

Answer 1

export class UserService {
  userSubject = new Subject<User[]>();
  userSubject$ = this.userSubject.asObservable();
  constructor(private apiService: ApiService) {}

  getUsersFromRest() {
    this.apiService
      .getEntriesFromRest("users")
      .pipe(
        map(x => JSON.stringify(x)),
        map(x => JSON.parse(x)),
        pluck("hydra:member")
      )
      .subscribe((data: User[]) => {
        this.usersSubject.next(data);
      });
  }
}

Can you try the above code

Answer 2

export class UserService {

  private userSubject = new Subject<User[]>();
  userSubject$ = this.userSubject.asObservable(); // If you add a public observable of your subject, you can have other components subscribe to this, and not be able to alter the subject, but still get the data.

  constructor(private apiService: ApiService) { }

  getUsersFromRest() {
    this.apiService.getEntriesFromRest('users')
      .pipe(
        map((x: any) => JSON.parse(x)) // Convert your response from JSON to an Object
      .subscribe(
        (data: User[]) => {
          this.usersSubject.next(data.hydra.member);
        });
      }
  }

There is no need to have a separate emit users method.