JSON

Query String

Que fait JSON vers Query String ?

Vous avez monté une config JSON dans votre code (paramètres de filtre, payload analytics, state OAuth) et il faut maintenant l'accrocher à une URL. Cette page s'occupe du dernier kilomètre fastidieux. Collez le JSON à gauche, récupérez ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified à droite, prêt à coller dans un lien, un appel fetch ou une URL de webhook. Les tableaux deviennent des clés répétées (la convention que tout serveur moderne comprend), les valeurs sont correctement encodées en pourcentage, et le ? initial est inclus pour que vous puissiez coller direct dans une URL.

La conversion s'appuie sur URLSearchParams, intégré au navigateur — la même primitive que votre framework serveur utilise pour parser la requête au retour. URLSearchParams produit une sortie application/x-www-form-urlencoded conforme au WHATWG URL Standard, et votre JSON est parsé par JSON.parse selon la RFC 8259. Les nombres et booléens sont coercés en chaînes (les query strings n'ont pas de typage), les valeurs null et undefined sont ignorées, et les objets imbriqués déclenchent une erreur claire pour que vous les aplatissiez.

Tout tourne en local dans votre navigateur — pas d'upload, pas d'aller-retour serveur, pas de log. Si vous avez le problème inverse (une query string et vous voulez du JSON), passez par Query String vers JSON. Si vous voulez décortiquer toute l'URL en protocole, hôte, chemin et partie search, la page URL vers JSON ou le Parser d'URL sont mieux adaptés. Les règles d'encodage en pourcentage utilisées ici viennent de la RFC 3986 §2.1, et le modèle plus large de parsing d'URL est documenté dans la référence API URL de MDN.

Comment convertir un JSON en query string

Trois étapes. Chacune correspond à un bouton de la page.

Collez l'objet JSON

Déposez le JSON dans le panneau de gauche. La valeur de premier niveau doit être un objet — les tableaux et les primitifs ne se transposent pas proprement en paramètres de query. Cliquez sur Exemple pour charger un payload de filtre e-commerce réaliste avec une chaîne, un nombre, une clé entre crochets et un tableau. Exemple :

{
  "customer": "Ava Chen",
  "status": "active",
  "total[gte]": "49.99",
  "page": 2,
  "tag": ["premium", "verified"]
}

Les nombres et booléens sont coercés en chaînes (les query strings n'ont pas de types). Les valeurs <code>null</code> et <code>undefined</code> sont ignorées — sinon elles ne feraient qu'encombrer l'URL.

Lisez la query string

Le panneau de droite se met à jour à mesure que vous tapez. L'exemple ci-dessus produit ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified. Les espaces deviennent + (style form-encoded — voir la FAQ), les crochets deviennent %5B/%5D, et le tableau tag se déploie en deux paramètres tag= séparés.

Copiez ou téléchargez

Cliquez sur Copier pour envoyer la query string dans le presse-papiers, ou sur Télécharger pour la sauvegarder en querystring.txt. Effacer remet à zéro le panneau d'entrée.

Quand vous l'utiliserez vraiment

Construire des URLs de filtre partageables

Votre dashboard laisse l'utilisateur filtrer des commandes par client, statut et plage de dates. L'état vit comme un objet JSON dans votre composant ({customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}). Pour rendre la vue partageable, vous l'accrochez à l'URL — collez le JSON ici, copiez la query string, terminé. Idem pour les pages catégorie e-commerce, les résultats de recherche, tout ce qui a des filtres avec état.

Câbler des URLs de callback de webhooks

Stripe, GitHub et la plupart des émetteurs de webhooks vous laissent placer des métadonnées dans la query string de l'URL de callback. Vous avez un objet JSON décrivant l'utilisateur ({userId: "USR-1001", source: "checkout", flow: "onboarding"}) et il faut l'accrocher à https://api.example.com/webhook?.... Coller, copier, coller — bien mieux que d'URL-encoder chaque valeur à la main en se demandant quels caractères il faut échapper.

Générer des URLs OAuth et OpenID

Les URLs d'autorisation OAuth, c'est 8 à 12 paramètres : client_id, redirect_uri, scope, state, response_type, etc. En construire une d'abord en JSON (pour la voir clairement) puis convertir ici, c'est plus rapide que de concaténer des chaînes en croisant les doigts pour l'encodage. Le paramètre state contient souvent un nonce et un return-path qui ont besoin de leur propre échappement.

Construire des requêtes API dans des clients HTTP

Quand vous testez un endpoint en cURL, dans Postman ou avec un fetch() rapide, vous avez généralement les paramètres sous forme de fragment JSON tiré de la doc. Convertissez ici, accrochez à l'URL, lancez la requête. Le filtre produit de la commande ORD-1001 {"sku": "SKU-101", "include": "variants"} devient ?sku=SKU-101&include=variants en un seul collage.

Questions fréquentes

Pourquoi les espaces sont-ils encodés en + plutôt qu'en %20 ?

Parce que la sortie est form-encoded (application/x-www-form-urlencoded), c'est-à-dire ce que tout navigateur envoie et ce que tout serveur attend dans une query string. Techniquement, la RFC 3986 préfère %20 dans les composants d'URI, mais la convention form-encoded avec + pour les espaces est antérieure à la RFC 3986 et c'est ce que les query strings utilisent depuis les années 90. Tous les frameworks serveur modernes décodent les deux : Express, FastAPI, ASP.NET, Spring, Rails, Django, peu importe. Si vous avez vraiment besoin de %20, lancez un petit .replace(/\+/g, "%20") sur la sortie.

Comment les tableaux sont-ils encodés ?

Ils se déploient en clés répétées. {"tag": ["premium", "verified"]} devient tag=premium&tag=verified. C'est la convention produite par URLSearchParams, et elle se relit proprement avec URLSearchParams.getAll() côté réception. Si votre serveur attend la notation à crochets (tag[]=premium&tag[]=verified) — courant en PHP et Rails — nommez la clé JSON tag[] au lieu de tag.

Puis-je avoir des objets imbriqués dans le JSON ?

Non — les query strings sont plates par conception. La page renvoie une erreur claire si elle voit un objet imbriqué pour que vous l'aplatissiez. La parade la plus courante, ce sont les clés à crochets : au lieu de {"filter": {"status": "active"}}, écrivez {"filter[status]": "active"}. Des frameworks comme Rails, PHP et qs.js les reparseront en objets imbriqués côté serveur. Ou aplatissez carrément : {"status": "active"} s'il n'y a pas vraiment d'ambiguïté.

Que deviennent les valeurs null et undefined ?

Elles sont ignorées. {"customer": "Ava Chen", "status": null} produit ?customer=Ava+Chen, pas ?customer=Ava+Chen&status=. Le raisonnement : status= dans l'URL signifie "la chaîne vide", c'est une vraie valeur, différente de "pas de status". Envoyer null sous forme de vide serait perdant et trompeur. Si vous voulez vraiment status=, envoyez {"status": ""}.

Les nombres et les booléens conservent-ils leur type ?

Non — les query strings ne transportent que des chaînes. {"page": 2} devient page=2 et {"debug": true} devient debug=true. Votre code serveur doit connaître le schéma et les reconvertir. C'est inhérent aux query strings (et aux données de formulaire) — le format de transport ne fait pas la différence entre le nombre 2 et la chaîne "2". Si vous avez besoin de paramètres typés, envoyez-les en JSON dans le corps de la requête.

Comment Unicode et les emojis sont-ils gérés dans les clés ou valeurs ?

Proprement. URLSearchParams encode les octets en UTF-8 et échappe en pourcentage tout ce qui est hors de l'ensemble sûr. Donc {"name": "中文"} devient name=%E4%B8%AD%E6%96%87, et {"reaction": "🔥"} devient reaction=%F0%9F%94%A5. Côté réception, URLSearchParams (ou n'importe quel parser de query d'un framework) les redécode. Aucun réglage d'encodage à régler — UTF-8, c'est ce que dicte le URL Standard.

À quoi sert le point d'interrogation initial ?

À ce que vous puissiez coller la sortie directement sur une URL — https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = une URL fonctionnelle. Si vous accrochez à une URL qui a déjà une query string, enlevez le ? et utilisez &. Si votre entrée est vide ou {}, la sortie l'est aussi (pas de ? tout seul).

Autres outils URL et JSON

Construire une query string n'est qu'une opération. Voici ce qui se marie bien avec :