JSON-config

URL

Wat doet JSON naar URL?

Je hebt een JSON-object dat de onderdelen van een HTTP-endpoint beschrijft — protocol, host, path, query-parameters, hash — en je hebt het nodig als één URL-string die fetch(), curl of je HTTP-client kan slikken. Plak de JSON links, krijg de samengestelde, percent-gecodeerde URL rechts. Dezelfde richting die elke backend-test-fixture, elk OpenAPI-voorbeeld en elk configbestand uiteindelijk moet maken.

Het gebruikt de native URL-constructor van de browser en URLSearchParams om de URL samen te stellen, dus de codering is precies wat de WHATWG URL Standard definieert en precies wat een echte browser zou versturen. Spaties in de query worden +, blokhaakjes worden %5B/%5D, accenten en emoji worden UTF-8-percent-gecodeerd. Herhaalde query-keys worden ondersteund via een array — "tag": ["red", "blue"] levert tag=red&tag=blue op.

Deze pagina bestaat omdat de meeste projecten URLs ergens al als JSON opslaan — environment-files, Postman-collections, Cypress-fixtures, OpenAPI-specs, Helm-values. Als je die JSON nodig hebt als echte URL-string voor een script of een eenmalige curl, is met de hand aan elkaar knutselen waar de bugs zitten. De conversie volgt RFC 3986 voor URL-syntax en accepteert standaard JSON volgens RFC 8259 als input. Alles draait lokaal — de JSON en de URL verlaten je browser nooit. De omgekeerde richting woont op URL naar JSON.

JSON naar een URL omzetten

Drie stappen. Elke stap hoort bij een knop op deze pagina.

Plak een JSON-config of laad het voorbeeld

Drop links een JSON-object dat de URL-onderdelen beschrijft. protocol en host zijn de enige verplichte velden; al het andere is optioneel. Klik op Voorbeeld om een realistisch e-commerce-endpoint met meerdere query-parameters en een hash te laden:

{
  "protocol": "https",
  "host": "api.shop.example.com",
  "pathname": "/v1/orders",
  "searchParams": {
    "customer": "Ava Chen",
    "status": "active",
    "total[gte]": "49.99",
    "page": "2"
  },
  "hash": "summary"
}

Optionele velden: port, username, password, pathname, searchParams, hash. Binnen searchParams is een string één enkele waarde; een array betekent herhaalde keys. JSON-syntax wordt geparset met JSON.parse — geen comments, geen trailing comma's.

Lees de samengestelde URL

Het rechterpaneel werkt zich bij terwijl je typt. Je ziet de volledige URL — https://api.shop.example.com/v1/orders?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2#summary — met elk deel percent-gecodeerd zoals de URL-standaard dat voorschrijft. Pleur 'm direct in een fetch()-call, een curl-commando, een Postman-test of een configbestand dat één URL-string verwacht.

Kopiëren of downloaden

Klik op Kopiëren om de URL naar je klembord te sturen, of op Downloaden om 'm als tekstbestand op te slaan. Gebruik Wissen op het inputpaneel om met een nieuwe config opnieuw te beginnen.

Wanneer je dit echt gebruikt

OpenAPI-voorbeelden omzetten naar uitvoerbare curl-commando's

OpenAPI-specs beschrijven servers als {url, variables} en operaties als paths met parameters. De daadwerkelijke URL met de hand uit die stukjes opbouwen voor een eenmalige curl is gepriegel — path-variabelen invullen, query-parameters coderen, de trailing slash goed krijgen. Drop de samengevoegde JSON hierin, kopieer de URL, plak in curl. De samengevoegde vorm sluit aan bij wat het OpenAPI-server-object beschrijft.

URLs bouwen uit gesplitste environment-variabelen

Een 12-factor-app slaat URL-onderdelen op als losse env vars: API_HOST, API_PORT, API_BASE_PATH, API_TOKEN_PARAM. Om tijdens incident response de volledige URL te produceren voor een sanity-check-curl zet je ze samen. Plak de JSON-vorm in deze pagina, krijg de URL, voer 'm uit. Sneller dan scripten in bash en zonder het risico te vergeten een token met + te coderen.

Cypress- en Playwright-fixtures die URLs als objecten opslaan

Test-fixtures slaan request-URLs vaak in gestructureerde vorm op zodat je op individuele onderdelen (de orderId path-param, de page query-param) kunt asserten. Als de fixture ook nog een echte HTTP-call moet doen (bijv. om data te seeden via cy.request of page.goto), moet die gestructureerde vorm weer een string worden. JSON naar URL maakt van het opgeslagen fixture-object van Marco Rivera de URL waar de test-harness op kan hitten.

Webhook-URLs samengesteld uit tenant-specifieke configs

Multi-tenant-systemen bewaren webhook-configs per klant: {host: "hooks.tenant-a.example.com", pathname: "/orders/ORD-1001/notify", searchParams: {token: "..."}}. De dispatcher leest de JSON en heeft een URL-string nodig om naar te POSTen. Dezelfde conversie als deze pagina, alleen op runtime. Gebruik de pagina om te verifiëren dat de URL die je code gaat produceren overeenkomt met wat de klant heeft geregistreerd.

Veelgestelde vragen

Wat is het verschil met de URL Builder-pagina?

Zelfde engine, andere insteek. URL Builder is voor het geval dat je gaat zitten om een URL van scratch op te bouwen — je componeert een request. JSON naar URL is voor het geval dat de JSON ergens al bestaat (een config, een OpenAPI-spec, een fixture, een env-var-split) en je 'm moet omzetten naar de URL-string die een stuk code verwacht. Kies de insteek die past bij wat je doet — de output is identiek.

Mijn JSON slaat de URL anders op — kan ik elke vorm gebruiken?

Hij heeft de WHATWG-URL-onderdeelnamen nodig: protocol, host, port, username, password, pathname, searchParams (object), hash. Als je JSON andere keys gebruikt (scheme, baseUrl, query, fragment), hernoem ze eerst. De vorm spiegelt wat new URL(...) blootstelt en wat de URL-spec definieert, dus je hangt aan hetzelfde model dat fetch en Node intern gebruiken.

Hoe stuur ik dezelfde query-parameter twee keer (bijv. ?tag=red&tag=blue)?

Gebruik een array als waarde: "tag": ["red", "blue"]. De converter levert tag=red&tag=blue in de volgorde die je hebt aangeleverd. Dat sluit aan bij hoe URLSearchParams herhaalde keys behandelt en is wat de meeste servers (Express, Rails, ASP.NET) verwachten voor array-style query-params.

Waarom wordt mijn spatie + in plaats van %20?

Spaties in het query-deel worden volgens de application/x-www-form-urlencoded-regels als + gecodeerd — dat is wat URLSearchParams oplevert. Spaties in het path worden als %20 gecodeerd. Allebei zijn geldig volgens RFC 3986 en elke server decodeert beide vormen. Als jouw server in de query alleen %20 accepteert, ligt de bug aan de serverkant.

Kan ik credentials (username/password) in de URL meesturen?

Ja — zet "username" en "password" in de JSON. Ze verschijnen voor de host als user:pass@host. RFC 3986 §3.2.1 waarschuwt hier expliciet voor in productie-URLs omdat ze in browser-history, server-logs en proxy-caches belanden — prima voor een snelle local test, niet prima in gedeelde configs.

Verlaat de URL ooit mijn browser?

Nee. Het parsen van de JSON is JSON.parse in jouw tab; het samenstellen van de URL is new URL(...) in jouw tab; geen van beide belt een server. Geen upload, geen logging. Je kunt de pagina één keer met internet openen, daarna offline gaan en 'm uit de cache blijven gebruiken.

Andere URL- en JSON-tools

JSON naar URL is de helft van het rondje. Hier is de rest van de gereedschapskist: