Mon parcours React : jour 18

JSON et manipulation de données

JSON (JavaScript Object Notation) est un format de données léger utilisé pour échanger des données entre un serveur et une application Web. Il est largement pris en charge dans différents langages de programmation et constitue un élément clé du développement Web moderne.

Principales fonctionnalités de JSON :
1.Structure :

• Les données sont stockées sous forme de paires clé-valeur dans un objet ou sous forme de tableau de valeurs.
• Exemple (Objet) :

{
  "name": "Damilare",
  "age": 30,
  "isEmployed": true,
  "hobbies": ["Singing", "Reading", "Coding"]
}

• Exemple (Tableau) :

["Dee", "Fred", "Inioluwa", "Iteoluwa"]

2.Échange de données :

• JSON est souvent utilisé pour envoyer et recevoir des données entre un serveur et un client.

Conversion entre JSON et JavaScript

1. Convertir JavaScript en JSON Utilisez JSON.stringify() pour convertir un objet ou un tableau JavaScript en chaîne JSON.

Exemple : Tableau JavaScript vers JSON

const names = ["Dee", "Fred", "Inioluwa", "Iteoluwa"];
const jsonString = JSON.stringify(names);

console.log(names);       // Original JS array
console.log(jsonString);  // JSON string

Exemple : Objet JavaScript vers JSON

const person = {
    name: "Damilare",
    age: 30,
    isEmployed: true,
    hobbies: ["Singing", "Reading", "Coding", "Helping"]
};
const jsonString = JSON.stringify(person);

console.log(person);      // Original JS object
console.log(jsonString);  // JSON string

2. Convertir JSON en JavaScript
Utilisez JSON.parse() pour convertir une chaîne JSON en un objet ou un tableau JavaScript.

Exemple : chaîne JSON vers tableau JavaScript

const jsonArray = `["Dee", "Fred", "Inioluwa", "Iteoluwa"]`;
const jsArray = JSON.parse(jsonArray);

console.log(jsonArray);   // JSON string
console.log(jsArray);     // JS array

Exemple : chaîne JSON vers objet JavaScript

const jsonObject = `{
    "name": "Damilare",
    "age": 30,
    "isEmployed": true,
    "hobbies": ["Singing", "Reading", "Coding", "Helping"]
}`;
const jsObject = JSON.parse(jsonObject);

console.log(jsonObject);  // JSON string
console.log(jsObject);    // JS object

Récupération et manipulation de fichiers JSON
Les données JSON peuvent être récupérées et manipulées dynamiquement à partir d'un serveur ou d'un fichier local.

1. Récupération de fichiers JSON
Utilisez l'API fetch() pour demander des données JSON.

Exemple : Récupérer le fichier JSON

fetch("people.json")
    .then(response => response.json()) // Convert response to JS object/array
    .then(data => console.log(data));  // Log the JSON data

2. Itérer sur les données JSON
Si le JSON récupéré est un tableau d'objets, vous pouvez utiliser des méthodes telles que .forEach() pour parcourir chaque élément.

Exemple : itération à travers les données JSON récupérées

fetch("people.json")
    .then(response => response.json())
    .then(people => {
        people.forEach(person => {
            console.log(person.name); // Access properties of each object
        });
    });

Cas d'utilisation de JSON dans les applications :
1.Fichiers de configuration :

• JSON est utilisé pour stocker les paramètres de l'application (par exemple, config.json).

2.API :

• Les API REST renvoient généralement JSON comme format de réponse.

3.Stockage des données :

• Les bases de données légères (par exemple, Firebase, MongoDB) s'appuient sur des structures de type JSON.

4.Échange de données :

• JSON est utilisé pour la communication entre le frontend et le backend.

Réflexion

Ce que j'ai appris :

• Comment convertir des objets/tableaux JavaScript en JSON et vice versa.
• Utiliser fetch() pour demander des données JSON à partir d'un fichier externe ou d'une API.
• Itération sur les données JSON à l'aide de .forEach().

La croissance quotidienne est douce, même si elle demande une discipline supplémentaire.

Jour 18 écrasé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!