web-dev-qa-db-fra.com

Comment convertir JSON en chaîne de requête en angular2?

Je suis nouveau sur Angular2. J'ai un objet JSON, comme ci-dessous:

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

qui doit être converti en chaîne de requête et ajouté à une URL externe pour rediriger la page comme ci-dessous:

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

Je cherche un moyen de le convertir en chaîne de requête. Dans JQuery, $.param() et dans AngularJS $httpParamSerializerJQLike() sont là pour ça. J'avais cherché, mais je n'ai rien obtenu. Je veux savoir s'il existe un moyen de le faire dans angular2.

jsonangulartypescriptquery-string
13
Sivaprasad derangula

Une méthode plus "officielle" sans les chaînes de caractères:

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

Cela fait d'ailleurs l'encodage automatique.

45
MikeOne

Cette solution fonctionnera avec les types les plus complexes

Au cas où quelqu'un se demanderait comment faire cela, j'ai écrit une extension qui devrait fonctionner avec c # .Net Core 1.1 et TypeScript 2.2.2 WebApi qui ressemble à cela.

N'oubliez pas d'inclure ces deux importations là où vous l'utilisez également

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());
        }
    }

}

Cela fonctionne pour tous les types complexes que j'ai utilisés jusqu'à présent.

6
johnny 5

Que dis-tu de ça:

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 la valeur est ?param1=param1&param2=param2&param3=param3.

1
AArias