How to convert JSON to query string in angular2?

Question

I\'m new to Angular2. I have a JSON object, as below:

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

wh

Answer 1

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(obj: T): URLSearchParams {
        let params: URLSearchParams = new URLSearchParams();

        if (obj == null)
        {
            return params;
        }

        QueryStringBuilder.PopulateSearchParams(params, '', obj);

        return params;
    }

    private static PopulateArray(params: URLSearchParams, prefix: string, val: Array) {
        for (let index in val) {
            let key = prefix + '[' + index + ']';
            let value: any = val[index];
            QueryStringBuilder.PopulateSearchParams(params, key, value);
        }
    }

    private static PopulateObject(params: URLSearchParams, prefix: string, val: T) {
        const objectKeys = Object.keys(val) as Array;

        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(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(obj: T): HttpParams {
    let params: HttpParams= new HttpParams();

    if (obj == null)
    {
        return params;
    }

    return QueryStringBuilder.populateSearchParams(params, '', obj);
}

private static populateArray(params: HttpParams, prefix: string, val: Array): 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(params: HttpParams, prefix: string, val: T): HttpParams {
    const objectKeys = Object.keys(val) as Array;

    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(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";