I am encountering an issue when sending data using queryParams. It seems to work fine when I pass a string or number

i'm attempting to retrieve object data from one component and pass it to another using queryParams. I've noticed that when passing a string or number, everything works correctly. However, when trying to pass an object or array, all I get is [Object Object]

this is the component where I want to receive the data

constructor(private route: ActivatedRoute) { }
    
      ngOnInit(): void {
       
        this.route.queryParams
          .subscribe((params: any) =>{
           console.log(params)
            
          })
      }
    
    }

and this is the component where I want to pass the data from

    constructor(... private route: Router) { }
    
      showFull(song: any) {
        console.log(song)
        this.route.navigate(['song'], { queryParams:{ song } } )
      }

and this is its template

<div class="songs">
  <div (click)="showFull(song)" *ngFor="let song of filteredSongs let i = index" class="song">
    ...
  </div>
</div>

i'm trying to get object data from one component to another, using queryParams. when i pass string or number it works but when i try to pass object or array i get [Object Object]

Answer №1

Optimize your code by utilizing Spread syntax ... in addition to the object.

constructor(... private route: Router) { }

showFull(song: any) {
  console.log(song)
  this.route.navigate(['song'], { queryParams:{ ...song } } )
}

Responding to the post owner's feedback.

Dare to dream big!

Solution 1 - utilize delete to eliminate any unwanted keys.

delete song.foo; 

Solution 2 - implement re-constructor for handling multiple keys that need to be discarded

const {foo: _, ...song} = newSong;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why can't I omit <someUnion, oneInterface> in TypeScript?

Kindly review this simple example: interface A { a: number; } interface B { b: number; } interface C { c: number; } type ABC = A | B | C; type omitA = Omit<ABC, A>; https://i.sstatic.net/5Mun4.png Unfortunately, I am unable to exclude an i ...

Exploring the inner components of an entity without the need for external tools

I am currently enhancing TypeScript usage in a project by implementing generics. The challenge I am facing involves dealing with a complex object retrieved from the backend, which consists of a class with numerous attributes, most of which are classes them ...

Creating a generic hashmap that can accept dynamic keys and an array of type T

In my attempt to create a robust typing interface for a hashmap in typescript, The hashmap consists of a key with a dynamic string name, and a values array containing a Generic type. I attempted to define the interface as follows: export interfa ...

Display "No Results Found" in Angular and Ionic 4 when the observable is empty

Below is the HTML code: <ion-list> <ion-radio-group> <ion-item class="ion-no-padding" *ngFor="let service of services | async"> <ion-label> <ion-grid> <ion-row> < ...

Using React with Typescript: Can the parent component access data fetched from a nested child component?

Can I access data retrieved from a child component (using a graphql query) in a parent component? For example, how can I use the data fetched by React-component-4 in React-component-1? Is there a way to do this or do I have to duplicate the data fetching ...

Get the HeatMap ngx swimlane chart as an image by downloading or exporting it

Is there a way to download or export the HeatMap ngx swimlane chart as an image? If you need a solution for downloading the chart as an image, please refer to this Plunker URL: https://plnkr.co/edit/2rtX5cueg2hlzmztUbkH?p=preview I am looking for any opt ...

Does anyone know of a custom typeguard that enforces the presence of elements in an array?

I need help creating a custom type guard to determine if an array contains nullable or optional elements. I have defined a helper type called RequiredArray: type RequiredArray<A extends readonly any[]> = A extends [infer P, ...infer R] ? [Non ...

Delayed loading of Angular asynchronous request

I'm currently facing an issue with an asynchronous request in Angular. I have a user interface displaying information in a table, with headers loaded from the backend using the http.get method from the HttpClient module. This method is called in the n ...

Tips for modifying a nested reactive form while ensuring validation is maintained?

When retrieving data from a service in the form of an array, one might wonder how to bind this data in a nested form if there are potentially endless entries in the array. The form is expected to be pre-filled with this data, including validation for each ...

Move an outside element onto an event in FullCalendar using Angular

Is it possible to drag an external element (such as a <div>) onto an event already on the calendar without creating a new event? I would like to modify the existing event by applying custom rendering or changing its appearance. Currently, I can succ ...

Utilize mapping for discriminated union type narrowing instead of switch statements

My objective is to utilize an object for rendering a React component based on a data type property. I am exploring ways to avoid utilizing switch cases when narrowing a discriminated union type in TypeScript. The typical method involves using if-else or sw ...

Delay experienced when transitioning from the main page to a form within an Ionic Angular application

Home Page|ionic form|ionic issueI recently developed an ionic angular application. In this app, I have designed a form and added a button on the home page that redirects to the form. However, I am facing an issue where there is a noticeable lag when transi ...

Tips for customizing the color of a leaflet-routing-machine marker

I'm currently utilizing the leaflt-routing-machine plugin, and I'm looking to alter the color of markers from blue to red. Any ideas or suggestions on how to achieve this?! ...

I'm having trouble getting the angular2 binding to work properly when using a promise with

Despite everything functioning correctly, I am facing an issue with updating the view. I anticipated that the subscription within ngOnInit() would automatically update the view each time new data is pushed down the stream. However, even though data is fl ...

What is the correct way to declare a class as global in TypeScript?

To prevent duplication of the class interface in the global scope, I aim to find a solution that avoids redundancy. The following code snippet is not functioning as intended: lib.ts export {} declare global { var A: TA } type TA = typeof A class A { ...

Tips for integrating icons with React's slick slider functionality

There's a piece of code that showcases various icons. switch (name) { case Header.Arrows.name: return <ArrowsComponent key={name} color={color}/>; case Header.Zoom.name: return <ZoomTool key={name} color={color}/>; ...

In Typescript Angular, how can I invoke a function on each element of an array as part of a sequence of Observables, and then return the total number of successful operations?

I am faced with the task of creating a parent record followed by multiple child records (order does not matter), and ending with a logging action. I am knowledgeable on how to chain single actions on an observable by mapping them together. For example: - ...

Filtering tables with checkboxes using Next.js and TypeScript

I've recently delved into Typescript and encountered a roadblock. While I successfully tackled the issue in JavaScript, transitioning to Typescript has left me feeling lost. My dilemma revolves around fetching data from an API and populating a table u ...

Errors with optional chaining operator (?.) in node_modules directory when using Node, Typescript, and tslint

My node script works perfectly with node versions up to 17: $ nvm use 17 Now using node v17.9.1 (npm v8.11.0) $ cd src $ npx tsc $ npx node parser.js $ cd .. However, starting from node version 18, it throws an error related to the optional chaining opera ...

Utilize Angular to dynamically assign values from object properties to an array of objects based on property names

In my array of objects, there is a property named "modulePermissions" inside an array of objects called "tabList". I have another object called "moduleName", which has the same value as the "modulePermissions" name, and a boolean value has been assigned to ...