JavaScript · TypeScript · frontière API

Axios snake_case ↔ camelCase

Centralisez la conversion de nommage à une frontière HTTP au lieu de renommer les propriétés dans tout le frontend.

Par Équipe éditoriale Camel Case ConverterPublié le 12 sept. 2026Dernière relecture

Construire un mapper récursif sûr pour JSON

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
}

Transformez uniquement objets JSON simples et tableaux, conservez les scalaires et détectez les collisions.

Ajouter des interceptors request/response à une instance Axios dédiée

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
})

Normalisez data/params en snake_case et response.data en camelCase.

Garder le code applicatif en camelCase

const response = await api.post("/users", {
  displayName: "Ada Lovelace",
  profileSettings: { emailNotifications: true },
})
console.log(response.data.createdAt)

Centraliser l’adapter permet à l’UI et aux modèles TypeScript de conserver une seule convention interne.

Points d’attention en production

  • Ne transformez pas FormData, Blob, ArrayBuffer, streams ou instances de classe comme du JSON.
  • Utilisez une instance dédiée ou un opt-out pour les endpoints à laisser intacts.
  • Ne passez pas les headers dans le même mapper de clés.
  • Les types TypeScript ne modifient pas les clés runtime ; l’interceptor doit réellement transformer les données.

Tester la frontière JSON en ligne

Testez objets imbriqués, tableaux, exclusions, stop paths, préfixes, collisions et diff de clés avant l’implémentation.

Déposez un fichier .json ou choisissez-en un sur votre appareil

Les fichiers sont lus uniquement dans votre navigateur. Taille maximale : 5 Mo.

JSON converti
{
  "userProfile": {
    "firstName": "Ada",
    "createdAt": "2026-09-12"
  }
}

Analyse, lecture de fichier, formatage et conversion s’exécutent localement dans votre navigateur. Le JSON n’est pas envoyé à un serveur de conversion.

Outils et guides associés

JSON → camelCaseJSON → snake_caseClés d’objet → camelCase en TypeScriptAPI Case ConverterFetch snake_case ↔ camelCaseTanStack Query snake_case ↔ camelCase