Comment utiliser JSON.Parse () et JSON.stringify ()

Json représente la notation d'objet JavaScript. JSON est un format de données lisible par l'homme couramment utilisé pour échanger des données entre le navigateur Web, les clients et le serveur. La plupart des API modernes utilisant des formats JSON comme sortie. C'est pourquoi le JSON devient un format de données populaire pour la sortie de l'API.

JavaScript fournit deux méthodes pour travailler avec le contenu JSON. Parse et Stringify. Les méthodes sont JSON.Parse () et JSON.stringify ().

• Json.Parse () La méthode prend la chaîne JSON et la transforme en un objet JavaScript.
• Json.stringify () La méthode prend un objet JavaScript et le transforme en une chaîne JSON.

1. Utilisation de JSON.Parse ()

Le json.La fonction parse () prend la saisie des données JSON et la transforme en un objet JavaScript. Voici un exemple simple de conversion d'une chaîne JSON en un objet JS.

// Stockez les données JSON dans une variable JavaScript var json = '"id": 1, "nom": "Dan Radak", "Country": "États-Unis"'; // convertir la chaîne JSON en objet JavaScript var obj = json.Parse (JSON); // accéder aux valeurs individuelles à partir de la console d'objet JavaScript.journal (obj.identifiant); // Sorties: 1 console.journal (obj.nom); // Sorties: console Dan Radak.journal (obj.pays); // Sorties: États-Unis

12345678910

// Stockez les données JSON dans une variable JavaScript JSON = '"ID": 1, "Name": "Dan Radak", "Country": "États-Unis"'; // convertir la chaîne JSON en javascript objectvar obj = json.Parse (JSON); // accéder aux valeurs individuelles à partir du javascript objectConsole.journal (obj.identifiant); // Sorties: 1Console.journal (obj.nom); // Sorties: Dan Radakconsole.journal (obj.pays); // Sorties: États-Unis

Passer une fonction - Vous pouvez également transmettre une fonction en deuxième argument (facultatif) à JSON.Fonction Parse () pour effectuer une tâche sur chaque valeur JSON. Voici un exemple auquel une fonction transforme toutes les valeurs de chaîne en majuscules dans l'objet retourné de la méthode Parse:

// Stockez les données JSON dans une variable JavaScript var json = '"id": 1, "nom": "Dan Radak", "Country": "États-Unis"'; // convertir la chaîne JSON en objet JavaScript var obj = json.Parse (JSON, (clé, valeur) => if (typeof value === 'String') RETOUR-valeur.touppercase (); RETOUR-valeur; ); // accéder aux valeurs individuelles à partir de la console d'objet JavaScript.journal (obj.identifiant); // Sorties: 1 console.journal (obj.nom); // Sorties: console Dan Radak.journal (obj.pays); // Sorties: États-Unis

123456789101112131415

// Stockez les données JSON dans une variable JavaScript JSON = '"ID": 1, "Name": "Dan Radak", "Country": "États-Unis"'; // convertir la chaîne JSON en javascript objectvar obj = json.Parse (JSON, (clé, valeur) => if (typeof value === 'String') RETOUR-valeur.touppercase (); valeur de retour;); // accéder aux valeurs individuelles à partir du javascript objectConsole.journal (obj.identifiant); // Sorties: 1Console.journal (obj.nom); // Sorties: Dan Radakconsole.journal (obj.pays); // Sorties: États-Unis

Nous supposons que cela vous aide à comprendre les utilisations de JSON.Parse () Méthode. Ensuite, apprenez une autre méthode JSON.stringify () pour effectuer l'inverse ci-dessus.

2. Utilisation de JSON.stringify ()

Json.La méthode stringify () est utilisée pour transformer un objet JavaScript en chaîne JSON. Vous pouvez simplement passer un objet JavaScript à cette fonction et obtenir un tableau JSON.

Voici un exemple simple de JSON.Méthode stringify ():

// Créer un objet JavaScript var obj = id: 1, nom: "Dan Radak", pays: "États-Unis" // Conversion de l'objet JS en json string var json = json.stringify (obj); console.log (json); // Sortie attendue: "id": 1, "nom": "Dan Radak", "pays": "États-Unis"

12345678

// Créer un objet JavaScript var obj = id: 1, nom: "Dan Radak", pays: "États-Unis" // Conversion de l'objet JS en json stringvar json = json.stringify (obj); console.log (json); // Sortie attendue: "id": 1, "nom": "Dan Radak", "pays": "États-Unis"

Vous pouvez également transmettre deux arguments supplémentaires, l'un est la fonction de remplacement et la seconde peut être la valeur de l'espace pour formater la sortie.

Utilisation de la fonction de remplacement - Une fonction de remplacement est utilisée pour filtrer les valeurs de sortie. Par exemple, vous pouvez créer une fonction et la transmettre comme argument. Cette fonction renverra toute valeur de chaîne comme indéfini.

// objet JavaScript var obj = id: 1, nom: "Dan Radak", âge: 28, pays: "États-Unis" Fonction Remplaceur (clé, valeur) // Filtrage des propriétés if (typeof value === 'String') return undefined; RETOUR-valeur; // en utilisant une console de fonction de remplacement.journal (JSON.stringify (obj, remplaceur)); // Sortie attendue: "id": 1, "âge": 28

1234567891011121314

// objet JavaScript var obj = id: 1, nom: "Dan Radak", âge: 28, pays: "États-Unis" Fonction Remplaceur (clé, valeur) // Filtrage des propriétés if (typeof value === 'String') return undefined; Valeur de retour; // Utilisation d'un remplaçant FonctionConsole.journal (JSON.Stringify (obj, remplaceur)); // Sortie attendue: "id": 1, "âge": 28

Utilisation du tableau comme remplaceur - Vous pouvez également passer un tableau contenant des noms de clés en tant que remplaceur. Ici, la fonction stringify () renvoie uniquement les valeurs de clé de clé correspondantes que les touches sont envoyées en tant que remplaceur.

Par exemple, nous envoyons l'ID et le nom dans un tableau comme fonction de remplacement. Dans ce cas, seules ces valeurs sont renvoyées comme un objet JS et rejetées toute autre valeur.

// Créer un objet JavaScript var obj = id: 1, nom: "Dan Radak", âge: 28, pays: "États-Unis" // Conversion de l'objet JS en chaîne JSON avec la console de remplacement du tableau.journal (JSON.stringify (obj, ["id", "name"])); // Sortie attendue: "id": 1, "nom": "Dan Radak"

123456

// Créer un objet JavaScript var obj = id: 1, nom: "Dan Radak", âge: 28, pays: "États-Unis" // Conversion de l'objet JS en chaîne JSON avec le tableau remplaceconsole.journal (JSON.stringify (obj, ["id", "name"])); // sortie attendue: "id": 1, "nom": "Dan Radak"

Argument spatial de passage - Vous pouvez également transmettre la valeur de l'espace comme un troisième argument facultatif. Cela aide à faire la sortie dans un format plus lisible.

// Créer un objet JavaScript var obj = id: 1, nom: "Dan Radak", âge: 28, pays: "États-Unis" // Remplaceur de fonction de remplacement vide Remplaceur (clé, valeur) valeur de retour; // en utilisant la console d'argument spatial en option.journal (JSON.stringify (obj, remplaceur, "); // output attendu // //" id ": 1, //" name ":" Dan Radak ", //" Age ": 28, //" country ":" États-Unis "// // Utilisation d'un onglet comme console d'argument d'espace.journal (JSON.stringify (obj, remplaceur, '\ t'); // Sortie attendue // // "ID": 1, // "Nom": "Dan Radak", // "Age": 28, // "Country": "États-Unis" //

123456789101112131415161718192021222324252627

// Créer un objet JavaScript var obj = id: 1, nom: "Dan Radak", âge: 28, pays: "États-Unis" // Remplaceur vide Remplaceur de fonction (clé, valeur) valeur de retour; // Utilisation de Space ArgumentConsole en option.journal (JSON.stringify (obj, remplaceur, "); // output attendu // //" id ": 1, //" name ":" Dan Radak ", //" Age ": 28, //" country ":" États-Unis "// // Utilisation d'un onglet comme espace argumentconsole.journal (JSON.Stringify (obj, remplaceur, '\ t'); // sortie attendue // // "id": 1, // "name": "Dan Radak", // "Age": 28, // "country ": "États-Unis"//

Conclusion

Dans ce tutoriel, vous avez appris les utilisations du JSON.Parse () et JSON.méthodes stringify ().