JSON : format d'échange de données dans le développement Web moderne

JSON (JavaScript Object Notation) est un format d'échange de données textuel léger qui est devenu la norme de facto dans le développement Web moderne. Malgré le nom contenant le mot « JavaScript », JSON est un format indépendant du langage et est pris en charge par presque tous les langages de programmation modernes.

Histoire de la création

JSON a été développé par Douglas Crockford au début des années 2000 comme une alternative à XML pour le transfert de données entre un navigateur et un serveur. À l'origine, le format était utilisé dans les projets State Software, où Crockford travaillait comme consultant. La spécification officielle JSON a été publiée en 2006 sous le nom de RFC 4627, puis mise à jour en 2013 (RFC 7159) et 2017 (RFC 8259).

La simplicité et la lisibilité de JSON en ont rapidement fait un choix populaire pour les API Web. Aujourd'hui, JSON est utilisé non seulement dans le développement Web, mais aussi dans les fichiers de configuration, les bases de données NoSQL, l'échange de données entre les microservices et de nombreux autres domaines.

Bases de la syntaxe

JSON est construit sur deux structures de données universelles : les objets (collections de paires clé-valeur) et les tableaux (listes ordonnées de valeurs).

Types de données

JSON prend en charge les types de données suivants :

Lignes - les séquences de caractères Unicode sont entourées de guillemets. Les caractères spéciaux sont protégés par une barre oblique inverse.

Nombres — nombres entiers ou fractionnaires dans le système de numération décimal. JSON ne distingue pas les nombres entiers et les nombres à virgule flottante au niveau de la syntaxe.

Valeurs booléennes — true ou false.

Null — valeur spéciale indiquant l'absence de données.

Objets — collections non ordonnées de paires clé-valeur, où les clés sont toujours des chaînes.

Tableaux — listes ordonnées de valeurs de tous types.

Exemple de structure

{
  "user": {
    "id": 12345,
    "username": "developer",
    "email": "dev@example.com",
    "isActive": true,
    "roles": ["admin", "editor"],
    "profile": {
      "firstName": "Ivan",
      "lastName": "Petrov",
      "age": 28
    },
    "lastLogin": null
  }
}

Travailler avec JSON en JavaScript

JavaScript fournit un objet intégré JSON avec deux méthodes principales pour travailler avec ce format.

Sérialisation : JSON.stringify ()

La méthode JSON.stringify() convertit un objet JavaScript en une chaîne JSON :

const user = {
  name: "Alexey",
  age: 30,
  skills: ["JavaScript", "Vue.js", "Node.js"]
};

const jsonString = JSON.stringify(user);
// '{"name":"Alexey","age":30,"skills":["JavaScript","Vue.js","Node.js"]}'

La méthode prend en charge des paramètres supplémentaires pour contrôler la mise en forme :

// Beau formatage avec des retraits
const formatted = JSON.stringify(user, null, 2);

// Sérialisation sélective des champs
const filtered = JSON.stringify(user, ['name', 'age']);

// Utilisation de la fonction de remplacement
const custom = JSON.stringify(user, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

Désérialisation : JSON.parse()

La méthode JSON.parse() convertit la chaîne JSON en objet JavaScript :

const jsonString = '{"name":"Alexey","age":30}'
const user = JSON.parse(jsonString);

console.log(user.name); // « Alexey »

Vous pouvez utiliser la fonction de rappel pour transformer les valeurs lors de l'analyse :

const jsonWithDate = '{"created":"2024-01-15T10:30:00.000Z"}';

const data = JSON.parse(jsonWithDate, (key, value) => {
  if (key === 'created') {
    return new Date(value);
  }
  return value;
});

console.log(data.created instanceof Date); // true

Modèles d'utilisation pratiques

Copie profonde des objets

JSON peut être utilisé pour une copie rapide et profonde des objets, bien que cette méthode ait des limites :

const original = {
  name: "Project",
  data: { items: [1, 2, 3] }
};

const copy = JSON.parse(JSON.stringify(original));
copy.data.items.push(4);

console.log(original.data.items); // [1, 2, 3]
console.log(copy.data.items); // [1, 2, 3, 4]

Il est important de se rappeler que cette méthode ne copie pas les fonctions, les caractères, les valeurs non définies et perd les prototypes d'objets.

Stockage des données dans localStorage

JSON est idéal pour la sérialisation des données avant de les enregistrer dans le stockage du navigateur :

// Sauvegarde
const settings = {
  theme: 'dark',
  language: 'ru',
  notifications: true
};
localStorage.setItem('settings', JSON.stringify(settings));

// Chargement
const savedSettings = JSON.parse(localStorage.getItem('settings'));

Travail avec l'API

Les API modernes utilisent JSON comme format principal d'échange de données :

// Envoi des données au serveur
async function createUser(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
  });
  
  return await response.json();
}

// Utilisation
const newUser = await createUser({
  name: "Maria",
  email: "maria@example.com"
});

Erreurs courantes et leurs solutions

Liens circulaires

JSON.stringify () renvoie une erreur s'il y a des références circulaires :

const obj = { name: "test" };
obj.self = obj;

// TypeError: Converting circular structure to JSON
// JSON.stringify(obj);

// Solution utilisant WeakSet
function stringifyWithCircular(obj) {
  const seen = new WeakSet();
  return JSON.stringify(obj, (key, value) => {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return "[Circular]";
      }
      seen.add(value);
    }
    return value;
  });
}

JSON incorrect

Lors de l'utilisation de sources de données externes, utilisez toujours le traitement des erreurs :

function safeJsonParse(jsonString, fallback = null) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('JSON parsing error:', error.message);
    return fallback;
  }
}

const data = safeJsonParse(userInput, {});

Perte de types de données spéciaux

JSON ne prend pas en charge les dates, les expressions régulières et d'autres types spéciaux :

const data = {
  created: new Date(),
  pattern: /test/gi
};

const json = JSON.stringify(data);
// {"created":"2024-11-21T10:00:00.000Z","pattern":{}}

// Solution : créer des méthodes toJSON personnalisées
data.created.toJSON = function() {
  return { _type: 'Date', value: this.toISOString() };
};

JSON Schema : validation des données

JSON Schema est un dictionnaire pour la description et la validation de la structure des données JSON :

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    },
    "email": {
      "type": "string",
      "format": "email"
    }
  },
  "required": ["name", "email"]
}

L'utilisation de JSON Schema permet de garantir l'intégrité des données dans les grandes applications et de créer une documentation pour l'API.

Performance et optimisation

Lorsque vous travaillez avec de grandes quantités de données, il est important de prendre en compte les performances des opérations avec JSON :

// Évitez l'analyse multiple
// Mauvais
for (let i = 0; i < 1000; i++) {
  const data = JSON.parse(jsonString);
  processData(data);
}

// Bien
const data = JSON.parse(jsonString);
for (let i = 0; i < 1000; i++) {
  processData(data);
}

// Utilisez le streaming pour les fichiers volumineux
async function processLargeJsonFile(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  // Traitement par parties
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value, { stream: true });
    // Traitement des blocs
  }
}

Sécurité lors de l'utilisation de JSON

Protection contre les injections JSON

Lorsque vous travaillez avec une entrée utilisateur, il est important d'éviter la concaténation directe des lignes :

// Pas sécurisé
const userInput = getUserInput();
const jsonString = '{"data":"' + userInput + '"}';

// Sécurisé
const jsonString = JSON.stringify({ data: userInput });

Validation des données d'entrée

Validez toujours les données provenant de sources externes :

function validateUserData(data) {
  if (!data || typeof data !== 'object') {
    throw new Error('Incorrect data format');
  }
  
  if (!data.name || typeof data.name !== 'string') {
    throw new Error('Required name field is missing');
  }
  
  if (data.age && (typeof data.age !== 'number' || data.age < 0)) {
    throw new Error('Invalid age value');
  }
  
  return true;
}

Conclusion

JSON est devenu une partie intégrante du développement moderne en raison de sa simplicité, de sa polyvalence et de son large support. Comprendre les subtilités de ce format, connaître les modèles courants et les problèmes potentiels aide à créer des applications plus fiables et plus productives. Que vous travailliez avec des API, des fichiers de configuration ou un stockage de données local, JSON reste un outil fiable pour l'échange structuré d'informations.

Vous souhaitez approfondir vos connaissances en JavaScript et autres technologies de développement Web ?

Rejoignez la plateforme éducative Code, où vous trouverez des cours interactifs sur JavaScript, Python, HTML, CSS et d'autres technologies populaires. Kodik aide les développeurs novices à apprendre la programmation par le biais de tâches pratiques et d'un apprentissage structuré.

Rejoignez également notre Chaîne Telegram, où vous recevrez le soutien de développeurs expérimentés, pourrez discuter de problèmes complexes et être au courant des dernières nouvelles du monde du développement !