JavaScript · TypeScript · API-Grenze
Axios snake_case ↔ camelCase
Zentralisiere Naming-Konvertierung an einer HTTP-Grenze statt Properties im gesamten Frontend umzubenennen.
JSON-sicheren rekursiven Key-Mapper bauen
function isPlainObject(value) {
return Object.prototype.toString.call(value) === "[object Object]"
}
function toCamelKey(key) { return key.replace(/_+([a-zA-Z0-9])/g, (_, char) => char.toUpperCase()) }
function toSnakeKey(key) { return key.replace(/([a-z0-9])([A-Z])/g, "$1_$2").replace(/[-\s]+/g, "_").toLowerCase() }
function mapKeys(value, keyMapper) {
if (Array.isArray(value)) return value.map((item) => mapKeys(item, keyMapper))
if (!isPlainObject(value)) return value
const output = {}
for (const [key, child] of Object.entries(value)) {
const nextKey = keyMapper(key)
if (Object.hasOwn(output, nextKey)) throw new Error(`Key collision: ${nextKey}`)
output[nextKey] = mapKeys(child, keyMapper)
}
return output
}Nur plain JSON-Objekte und Arrays transformieren, Skalare und Nicht-Plain-Werte erhalten und Kollisionen erkennen.
Request-/Response-Interceptors an eine dedizierte Axios-Instanz hängen
import axios from "axios"
const api = axios.create({ baseURL: "/api" })
api.interceptors.request.use((config) => {
if (config.data && isPlainObject(config.data)) config.data = mapKeys(config.data, toSnakeKey)
if (config.params && isPlainObject(config.params)) config.params = mapKeys(config.params, toSnakeKey)
return config
})
api.interceptors.response.use((response) => {
response.data = mapKeys(response.data, toCamelKey)
return response
})Request data/params zu snake_case und response.data zu camelCase normalisieren.
Anwendungscode in camelCase halten
const response = await api.post("/users", {
displayName: "Ada Lovelace",
profileSettings: { emailNotifications: true },
})
console.log(response.data.createdAt)Ein zentraler Adapter lässt UI und TypeScript-Modelle bei einer internen Konvention bleiben.
Hinweise für Produktion
- FormData, Blob, ArrayBuffer, Streams oder Klasseninstanzen nicht wie JSON rekursiv umschreiben.
- Für Endpunkte ohne Transformation dedizierte Instanz oder Opt-out vorsehen.
- Headers nicht durch denselben Object-Key-Mapper schicken.
- TypeScript-Typen ändern keine Runtime-Keys; der Interceptor muss Daten tatsächlich transformieren.
JSON-Grenze online testen
Teste verschachtelte Objekte, Arrays, Ausschlüsse, Stop Paths, Präfixe, Kollisionen und Key-Diff vor der Implementierung.
.json-Datei hier ablegen oder vom Gerät auswählen
Dateien werden nur im Browser gelesen. Maximale Größe: 5 MB.
{
"userProfile": {
"firstName": "Ada",
"createdAt": "2026-09-12"
}
}Parsing, Dateilesen, Formatierung und Schlüsselkonvertierung laufen lokal im Browser. JSON wird nicht an einen Conversion-Server gesendet.