How to convert JSON to query string in angular2?

Question

I am new to Angular2. I have a JSON object as shown below:

var options = { param1: "parama1", param2: "parama2", param3: "parama3" }; 

which should convert to a query string and add to the external URL to redirect the page, as shown below:

 ngOnInit(){ window.location.href = someurl?param1=param1&param2=param2&param3=param3; } 

I am looking for a way to convert it to a query string. In jQuery, there are $.param() for this, and in AngularJS $httpParamSerializerJQLike() . I searched, but received nothing. I want to know if there is a way to do this in Angular2.

Answer 1

More "official" method without concats string:

 import {URLSearchParams} from '@angular/http' let options = { param1: "param1", param2: "param2", param3: "param3" }; let params = new URLSearchParams(); for(let key in options){ params.set(key, options[key]) } console.log("http://someUrl?" + params.toString()); 

It does auto coding, by the way.

Answer 2

This solution will work with the most complex types.

If anyone is interested in how to do this, I wrote an extension that should work with C # .Net Core 1.1 and Typescript 2.2.2 WebApi, which looks like this.

Remember to include these two imports, in which you also use it

 import { URLSearchParams } from '@angular/http'; import 'rxjs/add/operator/map' export class QueryStringBuilder { static BuildParametersFromSearch<T>(obj: T): URLSearchParams { let params: URLSearchParams = new URLSearchParams(); if (obj == null) { return params; } QueryStringBuilder.PopulateSearchParams(params, '', obj); return params; } private static PopulateArray<T>(params: URLSearchParams, prefix: string, val: Array<T>) { for (let index in val) { let key = prefix + '[' + index + ']'; let value: any = val[index]; QueryStringBuilder.PopulateSearchParams(params, key, value); } } private static PopulateObject<T>(params: URLSearchParams, prefix: string, val: T) { const objectKeys = Object.keys(val) as Array<keyof T>; if (prefix) { prefix = prefix + '.'; } for (let objKey of objectKeys) { let value = val[objKey]; let key = prefix + objKey; QueryStringBuilder.PopulateSearchParams(params, key, value); } } private static PopulateSearchParams<T>(params: URLSearchParams, key: string, value: any) { if (value instanceof Array) { QueryStringBuilder.PopulateArray(params, key, value); } else if (value instanceof Date) { params.set(key, value.toISOString()); } else if (value instanceof Object) { QueryStringBuilder.PopulateObject(params, key, value); } else { params.set(key, value.toString()); } } } 

This works for all the complex types that I have used so far.

Answer 3

How about this:

 ngOnInit(){ let options = { param1: "param1", param2: "param2", param3: "param3" }; let myQuery = 'http://someurl?' for (let entry in options) { myQuery += entry + '=' + encodeURIComponent(options[entry]) + '&'; } // remove last '&' myQuery = myQuery.substring(0, myQuery.length-1) window.location.href = myQuery; } 

myQuery Value ?param1=param1¶m2=param2¶m3=param3 .