How to convert JSON to query string in angular2? How to convert JSON to query string in angular2? angular angular

How to convert JSON to query string in angular2?


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.


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&param2=param2&param3=param3.