This method is designed to handle a wide range of complex data types
For those wondering how to implement this, I've created an extension that is compatible with c# .Net Core 1.1 and Typescript 2.2.2 WebApi, as shown below.
Be sure to include these two imports wherever you plan to 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 approach has successfully handled all the complex data types I have encountered thus far.
Edit UrlSearch Parameters has been removed. The updated changes can be seen in the @NuryagdyMustapayev's gist below:
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;
}
Don't forget to import {HttpParams} from "@angular/common/http";