3

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.

Logan_Dupont
  • 355
  • 3
  • 13
  • 2
    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 : https://stackoverflow.com/questions/812925/what-is-the-maximum-possible-length-of-a-query-string – the-juju Nov 27 '19 at 10:04

3 Answers3

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'];  
      });
  }
Saurabh Yadav
  • 3,303
  • 1
  • 10
  • 20
  • 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` – Logan_Dupont Nov 27 '19 at 11:59
  • Check demo .. how we are using .. also check url – Saurabh Yadav Nov 27 '19 at 12:10
  • 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. – Logan_Dupont Dec 04 '19 at 10:01
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

MoxxiManagarm
  • 8,735
  • 3
  • 14
  • 43
-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'];  
  });
}
Sanket Jadav
  • 9
  • 3