How to convert JSON to query string in angular2?
You can use HttpParams
import { HttpParams } from '@angular/common/http';
new HttpParams({fromObject: yourObject}).toString()
This solution will work with most complex types
Incase anyone was wondering how to do this, I've written an extension that should work with c# .Net Core 1.1 and Typescript 2.2.2 WebApi which looks like so.
Remember to include these two imports where you are using it as well
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 is working for all the complex types I've used so far.
Edit UrlSearch Parameters has been removed. Here is the updated changes via @NuryagdyMustapayev's gist:
static buildParametersFromSearch<T>(obj: T): HttpParams {
let params: HttpParams= new HttpParams();
if (obj == null)
{
return params;
}
return QueryStringBuilder.populateSearchParams(params, '', obj);
}
private static populateArray<T>(params: HttpParams, prefix: string, val: Array<T>): HttpParams {
for (let index in val) {
let key = prefix + '[' + index + ']';
let value: any = val[index];
params = QueryStringBuilder.populateSearchParams(params, key, value);
}
return params;
}
private static populateObject<T>(params: HttpParams, prefix: string, val: T): HttpParams {
const objectKeys = Object.keys(val) as Array<keyof T>;
for (let objKey of objectKeys) {
let value = val[objKey];
let key = prefix;
if (prefix) {
key += '[' + objKey + ']';
} else {
key += objKey;
}
params = QueryStringBuilder.populateSearchParams(params, key, value);
}
return params;
}
private static populateSearchParams<T>(params: HttpParams, key: string, value: any): HttpParams {
if (value instanceof Array) {
return QueryStringBuilder.populateArray(params, key, value);
}
else if (value instanceof Date) {
return params.append(key, value.toISOString());
}
else if (value instanceof Object) {
return QueryStringBuilder.populateObject(params, key, value);
}
else if ('undefined' !== typeof value && null !== value){
return params.append(key, value.toString());
}
return params;
}
Remember to import {HttpParams} from "@angular/common/http";
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 is ?param1=param1¶m2=param2¶m3=param3
.
A more 'official' method without the string concats:
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());
This does automatic encoding by the way.