How to get the object value inside a object

Question

I am trying to make a global object for some part of the data from one service, that service is observable. So other components can use it.

I found a way call subject to handle this state management. I tried, and it's like half way working.

entity.ts file

export class DataDe {
  name:string;
  age:number;
  constructor(){
    this.name = "";
    this.age = 0;
  }
}

service file

@Injectable({
  providedIn: 'root'
})
export class DeService {

  sub= new BehaviorSubject<DataDe>(null);
  dataStire: DataDe = new DataDe();

  constructor(private http: HttpClient){}


  getData(id:any):Observable<any>{
    this.http.get(Url.getDetails+"id="+id).pipe(first()).subscribe(res=>{
        this.dataStire.name = res[0]['name'];
        this.dataStire.age = res[0]['age'];
    }
     this.returnSubject.next(Object.assign({},this.dataStire));
    return this.http.get(Url.getDetails+"id="+id)
    }
}

other component ts file

export class People implements OnInit{

    constructor(public de:DeService){}

    ngOnInIt(){
        console.log(this.de.dataStire);  //
        console.log(this.de.dataStire.age); //I want to get 4, but I only got 0 
    }
}

the actual result I got is an object looks like enter image description here

Possible duplicate of [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular) — Igor, Nov 05 '19 at 13:49
See also [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321/1260204) — Igor, Nov 05 '19 at 13:49

Damian C · Answer 1 · 2019-11-05T14:03:12.513

To harness the power of RxJS you are going to need to subscribe to that subject.

export class DeService {

    public returnSubject = new BehaviorSubject<DataDe>(null);
    dataStire: DataDe = new DataDe();

    constructor(private http: HttpClient) { }


    getData(id: any) {
        this.http.get("your request url").pipe(first()).subscribe((res) => {
            this.dataStire.name = res[0]['name'];
            this.dataStire.age = res[0]['age'];
            this.returnSubject.next(Object.assign({}, this.dataStire));
        });
    }
}

Notice that you need to call next() inside the subscribe for your .get() call

this.returnSubject.next(Object.assign({}, this.dataStire));

Finally to access it you need to subscribe() to your subject:

export class People implements OnInit {

    constructor(public de: DeService) { }

    ngOnInIt() {

        this.de.returnSubject.subscribe((event) => {
            console.log(event);  //
            console.log(event.age); //I want to get 4, but I only got 0 
        })
        this.de.getData();
    }
}

OPTION 2

I'd like to add that you don't necessarily need a subject for this:

All you need to do is pipe whatever modifications you need, then return an observable.

getData(id: any) {
    return this.http.get("your request url").pipe(
        first(),
        map((res) => {
            this.dataStire.name = res[0]['name'];
            this.dataStire.age = res[0]['age'];
        })
    );
}

Then subscribe to it:

ngOnInIt() {
    this.de.getData('anId').subscribe((event) => {
        console.log(event);  //
        console.log(event.age); //I want to get 4, but I only got 0 
    })
}

Have fun!

How to get the object value inside a object

1 Answers1