JSON-config

URL

Vad gör JSON till URL?

Du har ett JSON-objekt som beskriver delarna i en HTTP-endpoint — protocol, host, sökväg, query-parametrar, hash — och du behöver det som en enda URL-sträng som fetch(), curl eller din HTTP-klient kan svälja. Klistra in JSON till vänster, få den sammansatta och procentkodade URL:en till höger. Samma riktning som varje backend-test-fixture, varje OpenAPI-exempel och varje config-fil förr eller senare måste producera.

Verktyget använder webbläsarens inbyggda URL-konstruktor och URLSearchParams för att sätta ihop URL:en, så kodningen blir exakt det som WHATWG URL Standard definierar och exakt det en riktig webbläsare skulle skicka. Mellanslag i query blir +, hakparenteser blir %5B/%5D, accenter och emojis blir UTF-8-procentkodade. Upprepade query-nycklar stöds via en array — "tag": ["red", "blue"] ger tag=red&tag=blue.

Den här sidan finns för att de flesta projekt redan lagrar URL:er som JSON någonstans — environment-filer, Postman-collections, Cypress-fixtures, OpenAPI-specer, Helm-values. När du behöver den JSON som en riktig URL-sträng till ett skript eller en engångs-curl är det vid handhopknyckandet buggarna gömmer sig. Konverteringen följer RFC 3986 för URL-syntax och accepterar standard-JSON enligt RFC 8259 som indata. Allt körs lokalt — varken JSON eller URL lämnar din webbläsare. Motsatta riktningen bor på URL till JSON.

Så konverterar du JSON till en URL

Tre steg. Vart och ett motsvarar en knapp på sidan.

Klistra in en JSON-config eller ladda exemplet

Släpp ett JSON-objekt som beskriver URL-delarna till vänster. protocol och host är de enda obligatoriska fälten; allt annat är valfritt. Klicka på Exempel för att ladda en realistisk e-handels-endpoint med flera query-parametrar och en hash:

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

Valfria fält: port, username, password, pathname, searchParams, hash. Inuti searchParams är en sträng ett enda värde; en array är upprepade nycklar. JSON-syntaxen parsas med JSON.parse — inga kommentarer, inga avslutande kommatecken.

Läs den sammansatta URL:en

Den högra panelen uppdateras medan du skriver. Du ser hela URL:en — https://api.shop.example.com/v1/orders?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2#summary — där varje del är procentkodad så som URL-standarden definierar. Släpp den rakt in i ett fetch()-anrop, ett curl-kommando, ett Postman-test eller en config-fil som förväntar sig en enda URL-sträng.

Kopiera eller ladda ner

Klicka på Kopiera för att skicka URL:en till urklipp, eller på Ladda ner för att spara den som textfil. Använd Rensa i indatapanelen för att börja om med en ny config.

När du faktiskt använder det

Förvandla OpenAPI-exempel till körbara curl-kommandon

OpenAPI-specer beskriver servrar som {url, variables} och operationer som sökvägar med parameters. Att av dessa bitar för hand komponera den faktiska URL:en till en engångs-curl är pillrigt — substituera path-variabler, koda query-parametrar, få till slutet snedstreck. Klistra in det redan sammanslagna JSON:et här, kopiera URL:en, klistra in i curl. Den sammanslagna formen matchar det OpenAPI-server-objektet beskriver.

Bygga URL:er från utspridda environment-variabler

En 12-factor-app lagrar URL-delar som separata env-variabler: API_HOST, API_PORT, API_BASE_PATH, API_TOKEN_PARAM. För att producera den fullständiga URL:en till en sanity-check-curl under incidenthantering sätter du ihop dem. Klistra in JSON-formen i den här sidan, få URL:en, kör. Snabbare än att skripta i bash och utan risk att glömma koda en token som innehåller +.

Cypress- och Playwright-fixtures som lagrar URL:er som objekt

Test-fixtures lagrar ofta begäran-URL:er i strukturerad form så att enskilda delar (orderId path-paramen, page query-paramen) kan asserteras på. När fixturen också måste göra ett riktigt HTTP-anrop (t.ex. för att seed:a data via cy.request eller page.goto) måste den strukturerade formen bli en sträng. JSON till URL gör om Marco Riveras sparade fixture-objekt till den URL test-harnessen kan slå mot.

Webhook-URL:er sammansatta från tenant-specifika configer

Multi-tenant-system lagrar webhook-configer per kund: {host: "hooks.tenant-a.example.com", pathname: "/orders/ORD-1001/notify", searchParams: {token: "..."}}. Dispatchern läser JSON och behöver en URL-sträng att POSTa mot. Samma konvertering som den här sidan gör, fast i runtime. Använd sidan för att verifiera att den URL din kod kommer att producera matchar det kunden registrerat.

Vanliga frågor

Vad är skillnaden mot URL Builder-sidan?

Samma motor, annan inramning. URL Builder är för fallet där du sätter dig och bygger en URL från scratch — du komponerar en request. JSON till URL är för fallet där JSON redan finns någonstans (en config, en OpenAPI-spec, en fixture, en env-var-uppdelning) och du behöver konvertera det till URL-strängen som ett kodstycke förväntar sig. Välj inramningen som passar det du gör — utdata är identisk.

Min JSON lagrar URL:en annorlunda — kan jag använda vilken form som helst?

Den behöver WHATWG URL-delnamnen: protocol, host, port, username, password, pathname, searchParams (objekt), hash. Om din JSON använder andra nycklar (scheme, baseUrl, query, fragment) — döp om dem först. Formen speglar vad new URL(...) exponerar och vad URL-specen definierar, så du linjerar mot samma modell som fetch och Node använder internt.

Hur skickar jag samma query-parameter två gånger (t.ex. ?tag=red&tag=blue)?

Använd en array som värde: "tag": ["red", "blue"]. Konverteraren ger tag=red&tag=blue i den ordning du anger. Det matchar hur URLSearchParams hanterar upprepade nycklar och är vad de flesta servrar (Express, Rails, ASP.NET) förväntar sig för array-formade query-parametrar.

Varför blir mitt mellanslag + i stället för %20?

Mellanslag i query-komponenten kodas som + enligt reglerna för application/x-www-form-urlencoded — det är vad URLSearchParams ger. Mellanslag i sökvägen kodas som %20. Båda är giltiga enligt RFC 3986 och alla servrar avkodar båda formerna. Om din server bara accepterar %20 i query, sitter buggen i servern.

Kan jag inkludera credentials (användarnamn/lösenord) i URL:en?

Ja — sätt "username" och "password" i JSON:et. De dyker upp före hosten som user:pass@host. RFC 3986 §3.2.1 varnar för det i produktions-URL:er eftersom de hamnar i webbläsarhistorik, serverloggar och proxy-cacher — ok för en snabb lokal test, inte ok i delade configer.

Lämnar URL:en någonsin min webbläsare?

Nej. JSON-parsningen är JSON.parse i din flik; URL-bygget är new URL(...) i din flik; ingen av dem ringer en server. Ingen uppladdning, ingen loggning. Du kan öppna sidan en gång med internet, sedan koppla bort och fortsätta använda den från cachen.

Andra URL- och JSON-verktyg

JSON till URL är ena halvan av tur-och-retur. Här är resten av kitet: