JSON

Query String

¿Qué hace JSON a Query String?

Has montado una configuración JSON en tu código (parámetros de filtro, una carga de analítica, un state de OAuth) y ahora necesitas pegarla al final de una URL. Esta página se encarga del último tramo aburrido. Pega el JSON a la izquierda, recibe ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified a la derecha, listo para soltarlo en un enlace, una llamada fetch o una URL de webhook. Los arrays se expanden en claves repetidas (la convención que entiende cualquier servidor moderno), los valores se codifican en porcentaje correctamente y el ? inicial va incluido para que puedas pegar directamente en una URL.

La conversión usa URLSearchParams, que viene incorporado en el navegador, la misma primitiva que tu framework de servidor utiliza para parsear la petición de vuelta. URLSearchParams produce salida en formato application/x-www-form-urlencoded según el WHATWG URL Standard, y tu JSON se parsea con JSON.parse siguiendo el RFC 8259. Los números y booleanos se convierten a string (las query strings no tienen tipos), los valores null y undefined se omiten, y los objetos anidados lanzan un error claro para que los aplanes.

Todo se ejecuta localmente en tu navegador: no hay subida, ni viaje al servidor, ni logs. Si tienes el problema contrario (una query string y quieres JSON), usa Query String a JSON. Si quieres descomponer la URL completa en protocolo, host, ruta y parte de búsqueda, la página URL a JSON o el Parser de URL encajan mejor. Las reglas de codificación en porcentaje que aplicamos aquí están definidas en el RFC 3986 §2.1, y el modelo de parseo de URL más amplio vive en la referencia de la API URL de MDN.

Cómo convertir JSON en query string

Tres pasos. Cada uno se corresponde con un botón de la página.

Pega el objeto JSON

Suelta el JSON en el panel izquierdo. El valor de nivel superior debe ser un objeto: los arrays y primitivos no encajan limpiamente en parámetros de query. Pulsa Ejemplo para cargar un payload realista de filtro de e-commerce con un string, un número, una clave entre corchetes y un array. Ejemplo:

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

Los números y booleanos se convierten a string (las query strings no llevan tipos). Los valores <code>null</code> y <code>undefined</code> se omiten: lo único que harían sería ensuciar la URL.

Lee la query string

El panel derecho se actualiza mientras escribes. El ejemplo anterior produce ?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2&tag=premium&tag=verified. Los espacios se convierten en + (estilo form-encoded — mira la FAQ), los corchetes en %5B/%5D y el array tag se expande en dos parámetros tag= separados.

Copia o descarga

Pulsa Copiar para enviar la query string al portapapeles, o Descargar para guardarla como querystring.txt. Limpiar reinicia el panel de entrada.

Cuándo lo usarías de verdad

Crear URLs de filtro compartibles

Tu dashboard permite filtrar pedidos por cliente, estado y rango de fechas. El estado vive como un objeto JSON dentro del componente ({customer: "Marco Rivera", status: "active", date_from: "2026-04-01"}). Para que la vista sea compartible, lo añades a la URL: pega el JSON aquí, copia la query string y listo. Lo mismo vale para páginas de categoría de e-commerce, resultados de búsqueda y cualquier vista con filtros que conserven estado.

Cablear URLs de callback de webhooks

Stripe, GitHub y la mayoría de los emisores de webhooks te dejan colocar metadatos en la query string de la URL de callback. Tienes un objeto JSON describiendo al usuario ({userId: "USR-1001", source: "checkout", flow: "onboarding"}) y necesitas pegarlo a https://api.example.com/webhook?.... Pega, copia, pega: mejor que codificar a mano cada valor preocupándote por qué caracteres hay que escapar.

Generar URLs de OAuth y OpenID

Las URLs de autorización de OAuth tienen entre 8 y 12 parámetros: client_id, redirect_uri, scope, state, response_type, etc. Construir una primero en JSON (para verla limpia) y convertirla aquí es más rápido que concatenar strings rezando para que la codificación esté bien. El parámetro state suele llevar un nonce y una ruta de retorno que necesitan su propio escape.

Construir peticiones de API en clientes HTTP

Cuando estás probando un endpoint en cURL, Postman o un fetch() rápido, normalmente tienes los parámetros como un fragmento JSON sacado de la documentación. Conviértelo aquí, pégalo a la URL, lanza la petición. El filtro de productos del pedido ORD-1001 {"sku": "SKU-101", "include": "variants"} se vuelve ?sku=SKU-101&include=variants en un solo pegado.

Preguntas frecuentes

¿Por qué los espacios se codifican como + en lugar de %20?

Porque la salida es form-encoded (application/x-www-form-urlencoded), que es lo que envía cualquier navegador y lo que cualquier servidor espera en una query string. Técnicamente, el RFC 3986 prefiere %20 en componentes de URI, pero la convención form-encoded con + para espacios es anterior al RFC 3986 y es lo que las query strings vienen usando desde los 90. Cualquier framework de servidor moderno decodifica ambos: Express, FastAPI, ASP.NET, Spring, Rails, Django, lo que sea. Si necesitas %20 sí o sí, ejecuta un .replace(/\+/g, "%20") rápido sobre la salida.

¿Cómo se codifican los arrays?

Se expanden en claves repetidas. {"tag": ["premium", "verified"]} se vuelve tag=premium&tag=verified. Es la convención que produce URLSearchParams y que se recupera limpiamente con URLSearchParams.getAll() en el otro lado. Si tu servidor espera notación con corchetes (tag[]=premium&tag[]=verified) — habitual en PHP y Rails — nombra la clave JSON tag[] en lugar de tag.

¿Puedo tener objetos anidados en el JSON?

No: las query strings son planas por diseño. La página devuelve un error claro si ve un objeto anidado para que lo aplanes. La solución más habitual son las claves con notación de corchetes: en lugar de {"filter": {"status": "active"}}, escribe {"filter[status]": "active"}. Frameworks como Rails, PHP y qs.js los reparsean en objetos anidados al recibirlos. O directamente aplánalo conceptualmente: {"status": "active"} si no hay ambigüedad real.

¿Qué pasa con los valores null y undefined?

Se omiten. {"customer": "Ava Chen", "status": null} produce ?customer=Ava+Chen, no ?customer=Ava+Chen&status=. El razonamiento: status= en la URL significa "el string vacío", que es un valor real y distinto de "sin status". Mandar null como vacío sería ambiguo y daría problemas. Si de verdad quieres status=, manda {"status": ""}.

¿Se preservan los tipos de números y booleanos?

No: las query strings sólo llevan strings. {"page": 2} se vuelve page=2 y {"debug": true} se vuelve debug=true. Tu código de servidor tiene que conocer el esquema y reconvertirlos. Es algo intrínseco a las query strings (y a los formularios): el formato de cable no distingue entre el número 2 y el string "2". Si necesitas parámetros tipados, mándalos en el cuerpo de la petición como JSON.

¿Cómo maneja Unicode y emojis en claves o valores?

Limpiamente. URLSearchParams codifica los bytes en UTF-8 y escapa en porcentaje cualquier cosa fuera del conjunto seguro. Así, {"name": "中文"} se vuelve name=%E4%B8%AD%E6%96%87 y {"reaction": "🔥"} se vuelve reaction=%F0%9F%94%A5. En el otro lado, URLSearchParams (o el parser de query del framework que sea) los decodifica de vuelta. No hay ningún ajuste de codificación que tocar: UTF-8 es lo que manda el URL Standard.

¿Para qué sirve el signo de interrogación inicial?

Para que puedas pegar la salida directamente sobre una URL: https://shop.example.com/orders + ?customer=Ava+Chen&page=2 = una URL funcional. Si vas a pegarla a una URL que ya tiene query string, quita el ? y usa &. Si tu entrada está vacía o es {}, la salida también lo está (sin ? suelto).

Otras herramientas de URL y JSON

Construir una query string es una sola operación. Esto es lo que se combina bien con ella: