CODEWITHSUNDEEP
angular
Logan_Dupont
Logan_Dupont

Reputation: 275

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

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.

Upvotes: 3

Views: 1974

Answers (3)

Sanket Jadav
Sanket Jadav

Reputation: 9

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'];  
  });
}

Upvotes: -1

MoxxiManagarm
MoxxiManagarm

Reputation: 9124

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

Upvotes: 1

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

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'];  
      });
  }

Upvotes: 3

Related Questions