Parsing API Response (object) from component to another component in Angular 4

Question

I want to parse API response to another component

This is code from 'detail_item.component.ts', this code sent data to route "bookitem" in 'book_item.component.ts'

onSubmit(){
    this.appService.addItem(this.item).subscribe(item => {
      if(item.status ==200){
        this.router.navigate(['/bookitem'], {queryParams: {data: item.data}});
      }
    })
}

this is code from 'book_item.component.ts'

ngOnInit() {
    this.routeActive.queryParams.filter(params => params.data).subscribe(params => {
       this.book_item = params.data;
    });
}

when I console.log(this.book_item), what I got from it is [object object]. It should be contain json data.

add stackblitz.com example or more information about response you get — omurbek
– omurbek, Commented Sep 5, 2018 at 3:57
by just looking at the code you have - it looks like you item.data is an object, not primitive object. — dK-
– dK-, Commented Sep 5, 2018 at 5:34

Hana Wujira · Accepted Answer · 2018-09-05 05:49:14Z

0

If the type of item.data is object you need to convert it to string first which is like

onSubmit(){
    this.appService.addItem(this.item).subscribe(item => {
      if(item.status ==200){
        this.router.navigate(['/bookitem'], {queryParams: {data: 
JSON.stringify(item.data)}});
      }
    })
}

then you can parse it when you read it from the route on the other component

 ngOnInit() {
     this.book_item = JSON.parse(this.route.snapshot.queryParams['data']);
          }

answered Sep 5, 2018 at 5:49

Hana Wujira

8807 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

baj9032 · Accepted Answer · 2018-09-05 05:35:29Z

0

You got [object object] that is completely fine due to you are trying to pass object in query string. Further more you can't pass object in query string you can pass value that is convertible to string easily like number.

edited Sep 5, 2018 at 5:35

answered Sep 5, 2018 at 5:30

baj9032

2,5923 gold badges25 silver badges41 bronze badges

Collectives™ on Stack Overflow

Parsing API Response (object) from component to another component in Angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related