how to pass array as an parameter using routing in angular 4

Question

I am working on an angular project I want pass an array object as an parameter to another page through rouuting my function is as follows

Goto(item)
{

    console.log(item.numtopics);
    this.router.navigate(['/numbersystem'],  { queryParams: item.numtopics});

}

and getting the data as follows

constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe( param => {


        console.log(param);
    });

    }

but in console I am getting data like this

{0: "[object Object]", 1: "[object Object]", 2: "[object Object]"}

I am not getting the array data properly

any help. Thank You !!

porgo · Accepted Answer · 2018-06-08 10:08:52Z

1

If you want to get this passed array, you should use:

console.log(param.numtopics)

or you can also pass array like this:

this.router.navigate(['/numbersystem'],  { queryParams: item.numtopics});

and then you can get this array like you tried:

console.log(param)

answered Jun 8, 2018 at 10:08

porgo

1,7513 gold badges19 silver badges30 bronze badges

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

3 Comments

Harsha Kadwe Over a year ago

I have also done that but its its giving same data as an object.

baj9032 Over a year ago

@HarshaKadwe: queryParams is object. so you can pass { queryParams: { parameterName: item.numtopics } } and further detail just go throw documentation angular.io/api/router/NavigationExtras

Harsha Kadwe Over a year ago

i have done also edited my question its giving me same error.

AkshayP · Accepted Answer · 2018-06-11 09:12:07Z

Refer the official documentation, how queryParams are passed.

The reason why you get data like {0: "[object Object]", 1: "[object Object]", 2: "[object Object]"} is because it's an object.

Try passing JSON.stringify(item.numtopics) to the queryparams. This will pass a string to the queryParams. Also you can mention the NAME of the query(Refer Doc). For exapmle :

https://www.yourdomain.com/search?NAME=stringifiedString

Before you pass the stringified array you may want to encrypt the data so you can use some encryption algorithm. Thereafter, in the component where you retrieve the params you can again use JSON.parse(paramsData) to get array back from the string.

In case if you've used encryption, you should decrypt first and then use JSON.parse()

Collectives™ on Stack Overflow

how to pass array as an parameter using routing in angular 4

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related