Transferring API Response (object) Parsing between Components in Angular 4

Question

Transferring API Response (object) Parsing between Components in Angular 4

I need to transfer API response to another component

The following code is from 'detail_item.component.ts', where data is sent to the 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 code snippet is from 'book_item.component.ts'

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

After using console.log(this.book_item), the output is [object object] instead of expected JSON data.

angular typescript angular4-forms angular4-httpclient

Answer 1

Answer №1

When dealing with an object type in item.data, it is important to first convert it to a string as shown below:

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

Then, you will be able to parse it when retrieving it from the route in another component:

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

Answer 2

When dealing with an object type in item.data, it is important to first convert it to a string as shown below:

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

Then, you will be able to parse it when retrieving it from the route in another component:

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

Answer 3

Answer №2

You received the result [object object]. This is acceptable since you are attempting to include an object in the query string. However, it is important to note that objects cannot be directly passed in a query string. Instead, values that can easily be converted to strings, such as numbers, should be used.

Answer 4

You received the result [object object]. This is acceptable since you are attempting to include an object in the query string. However, it is important to note that objects cannot be directly passed in a query string. Instead, values that can easily be converted to strings, such as numbers, should be used.

Transferring API Response (object) Parsing between Components in Angular 4

Answer №1

Answer №2

Similar questions

Activate the ion-navbar button when submitting from the modal page

Creating an object with mapped properties from enumeration values using Typescript

What is the reasoning behind TypeScript's acceptance of value as a data type?

Tips for validating the upload functionality of a .csv file using Protractor

Is it possible to render dynamic components based on the input property of the parent?

Please delineate an unfinished Record, ensuring the constraints on the assigned type are maintained

Is it correct to implement an interface with a constructor in TypeScript using this method?

How can I retrieve query parameters passed from an Angular application in PHP?

Discovering how to properly run tests on a function within an if statement using Jasmin, Karma

Utilizing Object.keys in Typescript to loop through a key-value pair collection

What is the best way to parse JSON data with Typescript?

Struggling to create an Extension Method for Map<TKey, TValue[]> in TypeScript

transmit information to a service using Angular 8

Struggling to Add an Item to a Fixed List Linked to Grid

An issue has occurred: Failure to execute spawnSync PATH/target/node/node ENOENTNGCC. Please refer to the

Is it possible for pdfjs-dist to be used with Typescript?

What is the best way to declare a minimum and maximum date in HTML as the current date?

Tips on inserting a variable into an icon class in Angular 7

Angular can redirect the path to the current page

Issue: Using the command 'typings search' successfully locates a package, however, when attempting to install it using 'typings install', the process fails