Le Tutoriel de Javascript JSON

Qu'est-ce que JSON ?
JSON.parse(..)
JSON.stringify(..)

1. Qu'est-ce que JSON ?

Comme vous le savez, des données sont toujours transmises d’un ordinateur à l’autre via l’environnement Internet et elles sont emballées dans un certain format avant de les envoyer. Des destinataires doivent comprendre ce format pour analyser les données d'origine.

XML est un format assez courant pour stocker et transporter des données.

JSON est l’abréviation de JavaScript Object Notation. C'est également un format de stockage et de transmise de données. Le format JSON est dérivé de la syntaxe d'objet de Javascript. Il hérite donc de la simplicité et il est complètement basésur le texte.

Ci-dessous l'extrait de code qui déclare un objet en Javascript :

Javascript Object

var aCompany = {
   name : "Amazon",
   ceo : "Jeff Bezos",
   employees: [
     {firstName: "John", lastName: "Doe"},
     {firstName: "Anna", lastName: "Smith"},
     {firstName: "Peter", lastName: "Jones"}
   ]
};

Et une donnée est stockée dans le format JSON :

JSON Data

{
   "name" : "Amazon",
   "ceo" : "Jeff Bezos",
   "employees":[
     {"firstName":"John", "lastName":"Doe"},
     {"firstName":"Anna", "lastName":"Smith"},
     {"firstName":"Peter", "lastName":"Jones"}
   ]
}

Les points forts de JSON :

JSON est un format de données d'échange léger (Lightweight).
Les données JSON décrivent par elles-même donc il est facile à comprendre pour tous.
JSON est un langage indépedant et un texte. Vous pouvez utiliser n’importe quel langage pour lire ou créer des données JSON. La plupart des langages de programmation ont des bibliothèques pour lire et écrire des données JSON.

Exemple :

// JSON Object:

{"firstName":"John", "lastName":"Doe"}


// JSON Array:

[
     {"firstName":"John", "lastName":"Doe"},
     {"firstName":"Anna", "lastName":"Smith"},
     {"firstName":"Peter", "lastName":"Jones"}
]

JSON est purement un format de données - il ne contient que des propriétés (properties), pas de méthodes.
JSON exige que les guillemets doubles (double quotes) soient utilisés pour des chaînes et des noms de propriété. Les guillemets simples (Single quotes) ne sont pas valables.
Même lorsqu'une simple virgule ou deux-points (colon) est mal déplacé, un fichier JSON ne peux pas fonctionner correctement et ne fonctionne pas. Veillez à valider toutes les données que vous essayez d'utiliser.

2. JSON.parse(..)

L'utilisation de la méthode JSON.parse(text) vous permet d'analyser une données JSON et la convertir en un objet.

json-parse-example.js

var text = '{ '
  + ' "name": "Amazon", '
  + ' "ceo" : "Jeff Bezos", '
  + ' "employees" : ['
  + '    { "firstName":"John" , "lastName":"Doe" },'
  + '    { "firstName":"Anna" , "lastName":"Smith" },'
  + '    { "firstName":"Peter" , "lastName":"Jones" } '
  + '  ] '
  + '}';


var obj = JSON.parse(text);

console.log(obj.employees);

console.log(obj.ceo); // Jeff Bezos
console.log(obj.employees[0].firstName); // John
console.log(obj.employees[1].firstName); // Anna
console.log(obj.employees[2].firstName); // Peter

json-parse-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>JSON.parse</title>
   </head>
   <body>
      <div style="border:1px solid #ccc;padding:5px;">
         <h3 id="name"></h3>
         <i id="location"></i>
      </div>

      <script>
         var s = '{"firstName" : "Sammy", "lastName" : "Shark", "location" : "Ocean"}';

         var obj = JSON.parse(s);

         document.getElementById("name").innerHTML = obj.firstName + " " + obj.lastName;
         document.getElementById("location").innerHTML = obj.location;
      </script>

   </body>
</html>

3. JSON.stringify(..)

L'utilisation de la méthode JSON.stringify(obj) vous permet de convertir un objet Javascript en un texte sous le format JSON.

json-stringify-example1.js

var obj = {name : "tran", age : 39};

var text = JSON.stringify(obj);

console.log(text); // {"name":"tran","age":39}

JSON.stringify(obj)

La méthode JSON.stringify(obj) sert à convertir obj en une chaine (String). Si l'objet obj obtient la méthode toJSON(), cette méthode sera appelée afin de renvoyer String. Au contraire, elle sera converti par des règles par défaut :

Number, Boolean, String sera converti en valeurs primitives.
Infinity, NaN sera converti en null.
Si obj est undefined, Function, Symbol, il sera converti en undefined.
undefined, Function, Symbol apparaissent en l'objet, ils seront sautés.
undefined, Function, Symbol apparaissent dans tableau, ils seront convertis en null.
Toutes les propriétés (property) associées à la clé, telles que Symbol, seront ignorées.
L'objet Date qui contient la méthode toJSON() renvoie String, similairement à date.toISOString(), donc il sera traité comme une string.

json-stringify-example2.js

var obj = {
  name : "tran",
  age : 39,
  // function in object will be ignored
  sayHello : function()  {
     console.log("Hello");
  },
  // undefined, Symbol, function in Array will be converted to null.
  "others": ["1", Symbol(), undefined, function(){}, "2"]
};

var text = JSON.stringify(obj);

console.log(text); // {"name":"tran","age":39,"others":["1",null,null,null,"2"]}

Exemple :

json-stringify-example.js

JSON.stringify({});                    // '{}'
JSON.stringify(true);                  // 'true'
JSON.stringify('foo');                 // '"foo"'
JSON.stringify([1, 'false', false]);   // '[1,"false",false]'
JSON.stringify([NaN, null, Infinity]); // '[null,null,null]'
JSON.stringify({ x: 5 });              // '{"x":5}'

JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)); // '"2006-01-02T15:04:05.000Z"'


JSON.stringify({ x: 5, y: 6 }); // '{"x":5,"y":6}'

JSON.stringify([new Number(3), new String('false'), new Boolean(false)]);
// '[3,"false",false]'

// String-keyed array elements are not enumerable and make no sense in JSON
let a = ['foo', 'bar'];
a['baz'] = 'quux';      // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ]
JSON.stringify(a);      // '["foo","bar"]'


JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
// '{"x":[10,null,null,null]}'

// Standard data structures
JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]);
// '[{},{},{},{}]'

// TypedArray
JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]);
// '[{"0":1},{"0":1},{"0":1}]'

JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]);
// '[{"0":1},{"0":1},{"0":1},{"0":1}]'

JSON.stringify([new Float32Array([1]), new Float64Array([1])]);
// '[{"0":1},{"0":1}]'

// toJSON()
JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } }); // '11'


// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); // '{}'

JSON.stringify({ [Symbol('foo')]: 'foo' }); // '{}'

JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); // '{}'


JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
  if (typeof k === 'symbol') {
    return 'a symbol';
  }
});
// undefined

// Non-enumerable properties:
JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
// '{"y":"y"}'

JSON.stringify(obj [, replacer[, space]])

La méthode JSON.stringify(..) a en fait trois paramètres dont le deuxième et le troisième ne sont pas obligatoire.

Des paramètres :

obj

Un objet sera converti en une chaine JSON.

replacer

replacer peut être une fonction permettant d'ajuster le comportement lors de la conversion d'objets en chaînes JSON.
replacer peut être un tableau des String, il permet de spécifier une liste blanche (whitelist) des propriétés (property) qui va apparaitre dans la chaine JSON.

space

space peut être une chaîne (s'il est plus long que 10 caractères, il sera tronqué à 10 caractères). Sert d'insérer le JSON pour permettre à JSON de devenir plus joli et facile à voir.
space peut être un nombre inférieur ou égal à 10 (s'il est supérieur à 10, il sera considéré comme 10). Sert à spécifier une chaine, comprenant caractère vide 'space' (space), cette chaine sera insérée au JSON qui permet au JSON de devenir plus joli et facile à voir.

Des exemples :

L'exemple de paramètre replacer qui est un tableau des String :

json-stringify-replacer-example1.js

var obj = {
    name: "Tom",
    gender: "Male",
    company:"Walt Disney",
    friends: [
      {name:"Jerry", gender:"Male"},
      {name:"Donald", gender: "Male"}
    ]
};


var replacer = ["name", "friends"];


var json = JSON.stringify(obj, replacer);


console.log(json); // {"name":"Tom","friends":[{"name":"Jerry"},{"name":"Donald"}]}

L'exemple du paramètre replacer qui est une fonction :

json-stringify-replacer-example2.js

function replacer(key, value) {
    console.log(typeof key);
    console.log(key);

    // Filtering out properties
    if (typeof value === 'string') {
        return undefined;
    }
    return value;
}

var obj = {
    foundation: 'Mozilla',
    model: 'box',
    week: 45,
    transport: 'car',
    month: 7
};
 

var json = JSON.stringify(obj, replacer);


console.log(json); // '{"week":45,"month":7}'

L'exemple de paramètre replacer qui est une fonction et du paramètre obj qui est un tableau.

json-stringify-replacer-example3.js

// If obj is an Array ==> @key: type of string (Index of array)
function replacer(key, value) {
    console.log(key);
    console.log(typeof key);

    // Index
    if (key === "0") {
        return "@";
    }
    //
    if (typeof value === 'string') {
        return undefined;
    }
    return value;
}


// obj is an Array
var obj = ['Mozilla', 'box', 45, 'car', 7];

var json = JSON.stringify(obj, replacer);

console.log(json); // ["@",null,45,null,7]

L'exemple du paramètre space :

json-stringify-space-example.js

var obj = {
    b: 42,
    c: "42",
    d: [1, 2, 3]
};

console.log(JSON.stringify(obj, null, 3));
// "{
//    "b": 42,
//    "c": "42",
//    "d": [
//       1,
//       2,
//       3
//    ]
// }"

console.log(JSON.stringify(obj, null, "-----"));
// "{
// -----"b": 42,
// -----"c": "42",
// -----"d": [
// ----------1,
// ----------2,
// ----------3
// -----]
// }"

Le Tutoriel de Javascript JSON

1. Qu'est-ce que JSON ?

2. JSON.parse(..)

3. JSON.stringify(..)

Tutoriels de programmation ECMAScript, Javascript

Tutoriels de programmation ECMAScript, Javascript

Articles les plus récents