oujood.com

La méthode json parse pour convertir une chaine json

En JavaScript, vous pouvez facilement analyser les données JSON reçues du serveur Web à l'aide de la méthode JSON.parse(). La méthode json parse analyse une chaîne JSON et construit la valeur ou l'objet JavaScript décrit par la chaîne

search |

Analyse syntaxique des données JSON en JavaScript

Une utilisation courante de JSON consiste à échanger des données vers/depuis un serveur web.
Lorsque vous recevez des données d'un serveur Web sous format json, les données sont toujours une chaîne de caractères.
En analysant les données avec JSON.parse(), les données deviennent un objet JavaScript.
En JavaScript, vous pouvez facilement analyser les données JSON reçues du serveur Web à l'aide de la méthode JSON.parse(). Cette méthode analyse une chaîne JSON et construit la valeur ou l'objet JavaScript décrit par la chaîne. Si la chaîne donnée n'est pas un JSON valide, vous obtiendrez une erreur de syntaxe.JSON.parse()
Supposons que nous ayons reçu la chaîne codée JSON suivante d'un serveur Web :

Exemple

{"titre": "L'Étranger", "auteur": "Albert Camus", "année": "1942", "pays": "France"}

Nous pouvons simplement utiliser la méthode JavaScript parse() pour convertir cette chaîne JSON en un objet JavaScript et accéder aux valeurs individuelles en utilisant JSON.parse().
JSON ici est une variable où en va stocker la chaine json.

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<title>Création d’un objet à partir d’une chaîne JSON</title>
</head>
<body>

<h1>Création d’un objet à partir d’une chaîne JSON</h1>
<p id="exemple"></p>
<script>
var livre = '{"titre": "L\'Étranger", "auteur": "Albert Camus", "année": "1942", "pays": "France"}'
var objLivre = JSON.parse(livre);
document.getElementById("exemple").innerHTML ="Titre: "+ objLivre.titre + "<br> Auteur: " + objLivre.auteur +"<br>Année:  " + objLivre.année;
</script>

</body>
</html>

 

Analyse des données JSON imbriquées en JavaScript : Tableau comme JSON

Les objets et tableaux JSON peuvent également être imbriqués. Un objet JSON peut arbitrairement contenir d'autres objets JSON, des tableaux, des tableaux imbriqués, des tableaux d'objets JSON, et ainsi de suite.
Lorsque vous utilisez la méthode JSON.parse() sur un JSON dérivé d'un tableau, la méthode renvoie un tableau JavaScript, au lieu d'un objet JavaScript.
L'exemple montre comment analyser un objet JSON imbriqué et en extraire toutes les valeurs en JavaScript.

Sélectionner le code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Parse Nested JSON Data in JavaScript</title>
</head>
<body>
    <script>
    /* Stocker une chaîne JSON de plusieurs lignes dans une variable JS
    en utilisant les nouveaux littéraux de modèle ES6 */
    var livre = `{
        "book" : {
            "nom" : "Harry Potter et la Coupe de Feu",
            "auteur" : "J. K. Rowling",
            "année" : 2000,
            "personnages" : ["Harry Potter", "Hermione Granger", "Ron Weasley"],
            "genre" : "Fantasy Fiction",
            "prix" : {
                "livre de poche" : "10,40 $", " couverture rigide" : "20,32 $", "E-book" : "$4.11"
            }
        }
    }` ;
    
    // Conversion d'un objet JSON en objet JS
    var objLivre = JSON.parse(livre);
    
    // Définir une fonction récursive pour imprimer les valeurs imbriquées
    function printValues(obj) {
        for(var k in obj) {
            if(obj[k] instanceof Object) {
                printValues(obj[k]);
            } else {
                document.write(k +": "+ obj[k] + "<br>");
            };
        }
    };
    
// Impression de toutes les valeurs de l'objet résultant
    printValues(objLivre);
	document.write("<hr>");

    
    // Impression d'une seule valeur
    document.write(objLivre["book"]["auteur"] + "<br>");  
    document.write(objLivre["book"]["personnages"][0] + "<br>");  
    document.write(objLivre["book"]["prix"][" couverture rigide"]); 
    </script>
</body>
</html>


 

Exceptions : Analyse des dates dans JSON

Les objets date ne sont pas autorisés dans JSON.
Si vous devez inclure une date, écrivez-la sous forme de chaîne.
Vous pourrez la reconvertir en objet date ultérieurement .

Sélectionner le code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Parse Nested JSON Data in JavaScript</title>
</head>
<body>
   <h2>Convertit une chaîne de caractères en un objet date.</h2>
<p id="exemple"></p>

<script>
const text = '{"nom" : "Victor Hugo", "naissance" : "1802-2-26", "ville" : "Besançon"}';
const obj = JSON.parse(text);
//Création d'une fonction pour formater la date
function formatDate(date) {
  var monthNames = [
   "Janvier", "Février", "Mas",
    "Avril", "Mai", "Juin", "Juillet",
    "Aout", "Septembre", "Octobre",
    "Novembre", "Décembre"
  ];

  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return day + ' ' + monthNames[monthIndex] + ' ' + year;
}
// conversion de la chaine de caractères en date
date = new Date(obj.naissance);
// Formater la date
obj.naissance=formatDate(date)
document.getElementById("exemple").innerHTML = "Nom: "+obj.nom + "<br>Date de naissance: " + obj.naissance + "<br>Lieu de naissance : "+ obj.ville; 
</script>

</body>
</html>


 

Vous pouvez aussi utiliser le deuxième paramètre de la fonction JSON.parse(), appelé reviver. Le paramètre reviver est une fonction qui vérifie chaque propriété, avant de renvoyer la valeur.

Sélectionner le code


<!DOCTYPE html>
<html>
<body>
<h2>Convertit une chaîne de caractères en un objet date.</h2>

<p id="exemple"></p>

<script>
const text = '{"nom":"John", "naissance":"1986-12-14", "ville":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "naissance") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("exemple").innerHTML = obj.nom + ", " + obj.naissance; 
</script>

</body>
</html>

 
Par carabde 2 novembre 2021

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise menu

Définit une liste / menu de commandes

Balise commentaire

Définit un commentaire

Balise progress

Représente l'état d'avancement d'une tâche



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci