How do I access specific data from this array in Angular 10?

Question

I'm making a login app in angular 10 and now I need to somehow access the data, but I'm not sure how.

This is where I get my data. The method "getUsers" gets all the data.

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { LoginModel } from '../models/login.model';
import { tap } from 'rxjs/operators';

@Injectable()
export class LoginService {

  private url = 'api/user';

  // tslint:disable-next-line: variable-name
  private _users$ = new BehaviorSubject<LoginModel[]>([]);
  get users$(): Observable<LoginModel[]> { return this._users$.asObservable(); }


  constructor(private http: HttpClient) { }


  getUsers(): Observable<LoginModel[]> {
    return this.http.get<LoginModel[]>(this.url)
      .pipe(
        tap(data => this._users$.next(data))
      );
  }

}

This is the model I use:

export interface LoginModel {
    userID: string;
    wachtwoord: string;
    admin: boolean;
  }

Now I want to access specific data from this in my login component, like for example the userID. In my logincomponent I imported the LoginService (the first code) so I can use the "getUsers" method (which returns an array), but how do I get the specific data from the array? Thanks in advance.

Use the map operator. Also, can you include some sample data to illustrate what exactly you want to fetch from it. — Nicholas K
– Nicholas K, Commented Dec 6, 2020 at 17:06

Parameshwar Rao · Accepted Answer · 2020-12-06 18:04:48Z

You need to suscribe getUsers() either in component or wherever it is called as you are using HTTP observable

let userdetails:Array<LoginModel> = [];

 this.getUsers.subscribe((User) =>{
                  user.forEach(details =>{
                      //get details here                         
                   console.log(details.userID);
                   console.log(details.wachtwoord);
                   console.log(details.admin);
                   userdetails.push(details);
                      });//for each end
        },(error)=>{
        //handle error
       });

But since you are using rxjs tap and updating it to behaviour subject

There are two ways:

1.) subscribing to data when http calls are made. so that new data is constantly updated (recommended)

let userdetails:Array<LoginModel> = [];
this._users$.subscribe((user)=>{
  //new value comes here everytime http call is made
    //user is array so use forEach or map 
        user.forEach((detail)=>{ 
                   console.log(detail.userID);
                   console.log(detail.wachtwoord);
                   console.log(detail.admin);
                    }); 
      });

Note:- dont forget to unsubscribe behaviour subject at ngondestroy(Angular life Ondestory life cycle hook). Forgetting to do so will cause memory leak

ngondestroy() { this._users$.unsubscribe();  }

2.) second method is to get instant value of behaviour subject. It is not recommended as you will get only at the moment value states need to be managed

let userdetails:Array<LoginModel> = this._users$.getValue(); //gives instant value

better solution is do it inside the getUser call like this

let userdetails:Array<LoginModel> = [];

    this.getUsers.subscribe((User) =>{
                          //detailshere
  userdetails = this._users$.getValue();//value update
             userdetails.forEach((detail)=>{ 
                  console.log(userdetails.userID);                       
                  console.log(userdetails.wachtwoord);
                  console.log(userdetails.admin);
                        }); 
 
                },
              (error)=>{
                //handle error error
               });

https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject#getvalue-

Collectives™ on Stack Overflow

How do I access specific data from this array in Angular 10?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related