How to retrieve object from query params in url in Angular 8

Question

I was wondering if there is a way how I can retrieve an array of objects from the queryParams in a url. The objects that I want to retrieve should look like this.

events: [
 {
   locations: ['123456789', '987654321']
   period: {
     from: '2019-11-19',
     to: '2019-11-27'
   }
 },
 {
   locations: ['123456789']
   period: {
     from: '2018-01-23',
     to: '2018-01-25'
   }
 }
],
days: [0, 1, 2, 3],
groupBy: 'days',
extraSeries: ['visits']

So I was wondering how the queryparams in the url should look like and how I should retrieve them from the url. For example how do I get queryParam events which return the array of objects?

The reason why I need this is in the queryParams is because I want to be able to share a url with other users where the filter is set based on the queryParams.

First of all, you should know that you can reach some limitation in term or URL length (browser side or server side). You can have some details here : stackoverflow.com/questions/812925/… — the-juju
– the-juju, Commented Nov 27, 2019 at 10:04

Saurabh Yadav · Accepted Answer · 2019-11-27 10:01:52Z

3

You can use queryParams

Look out this demo it helps you

import { ActivatedRoute } from '@angular/router';


 constructor( private route: ActivatedRoute) { }

 ngOnInit() {
     this.route.queryParams.subscribe(params => {
        let event = params['events'];  
      });
  }

answered Nov 27, 2019 at 10:01

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

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

3 Comments

Logan_Dupont Over a year ago

I tried this approach but events was undefined. Probably I used wrong queryParams in the url. The url that I used was like this events[0][location]=921534361&events[0][period][from]=2019-11-19&events[0][period][to]=2019-11-25

Saurabh Yadav Over a year ago

Check demo .. how we are using .. also check url

Logan_Dupont Over a year ago

If I use this querystring

events[0][locations][0]=123456789&events[0][locations][1]=987654321&events[0][period][from]=2019-11-19&events[0][period][to]=2019-11-27&events[1][locations][0]=123456789&events[1][period][from]=2018-01-23&events[1][period][to]=2018-01-25

I'm not able to retrieve params['events'] as it will be undefined because params contains keys like events[0][locations][0]. So I was wondering how I can transform the params to the object that I need.

MoxxiManagarm · Accepted Answer · 2019-11-27 10:04:50Z

1

I wouldn't share the params as is. You can base64 encrypt and decrypt the params for sharing. Your example data encrypted:

ZXZlbnRzOiBbDQogew0KICAgbG9jYXRpb25zOiBbJzEyMzQ1Njc4OScsICc5ODc2NTQzMjEnXQ0KICAgcGVyaW9kOiB7DQogICAgIGZyb206ICcyMDE5LTExLTE5JywNCiAgICAgdG86ICcyMDE5LTExLTI3Jw0KICAgfQ0KIH0sDQogew0KICAgbG9jYXRpb25zOiBbJzEyMzQ1Njc4OSddDQogICBwZXJpb2Q6IHsNCiAgICAgZnJvbTogJzIwMTgtMDEtMjMnLA0KICAgICB0bzogJzIwMTgtMDEtMjUnDQogICB9DQogfQ0KXSwNCmRheXM6IFswLCAxLCAyLCAzXSwNCmdyb3VwQnk6ICdkYXlzJywNCmV4dHJhU2VyaWVzOiBbJ3Zpc2l0cydd

The encrypted data is not shorter, but it has url-friendly characters

answered Nov 27, 2019 at 10:04

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Comments

Sanket Jadav · Accepted Answer · 2019-11-27 10:18:59Z

-1

It may help to you try below code:

import { ActivatedRoute } from '@angular/router';


constructor( private route: ActivatedRoute) { }

ngOnInit() {
  this.route.queryParams.subscribe(
  params => {
    let event = params['events'];  
  });
}

answered Nov 27, 2019 at 10:18

Sanket Jadav

93 bronze badges

2 Comments

Saurabh Yadav Over a year ago

Dont copy paste as it is from other answers.. Modify it and explain in better way :)

Sanket Jadav Over a year ago

I had tried and its work for me so I put this answer.

Collectives™ on Stack Overflow

How to retrieve object from query params in url in Angular 8

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related