Руководство JavaScript JSON

1- Что такое JSON?

Как вы уже знаете данные передаются из одного компьютера в другой через среду  Internet, и они упакованы по определенному формату перед тем как передать. Получатель должен понимать данный формат, чтобы анализировать оригинальные данные.
XML является довольно распространенным форматом для хранения и передачи данных.
JSON это аббревиатура  JavaScript Object Notation, он так же имеет формат для хранения и передачи данных. Формат  JSON имеет корни от синтаксиса объекта у  Javascript, поэтому он наследует простоту и совершенно основан на тексте.
Ниже является сниппет, объявляющий некоторые объекты в Javascript:
Javascript Object
var aCompany = {
   "name" : "Amazon",
   "ceo" : "Jeff Bezos",
   "employees":[
     {"firstName":"John", "lastName":"Doe"},
     {"firstName":"Anna", "lastName":"Smith"},
     {"firstName":"Peter", "lastName":"Jones"}
   ]
};
И данные хранящиеся в формате  JSON:
JSON Data
{
   "name" : "Amazon",
   "ceo" : "Jeff Bezos",
   "employees":[
     {"firstName":"John", "lastName":"Doe"},
     {"firstName":"Anna", "lastName":"Smith"},
     {"firstName":"Peter", "lastName":"Jones"}
   ]
}
Преимущества у  JSON:
  • JSON это формат для обмены легких данных (Lightweight).
  • Данные JSON сами описывают себя, поэтому понятно для всех.
  • JSON это независимый язык и является текстом. Вы можете исопользовать любой язык для чтения или создания данных JSON. Почти все языки программирования имеют библиотеки для чтения и записи данных JSON.
Пример:
// JSON Object:

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


// JSON Array:

[
     {"firstName":"John", "lastName":"Doe"},
     {"firstName":"Anna", "lastName":"Smith"},
     {"firstName":"Peter", "lastName":"Jones"}
]
  • JSON это чистый формат данных - он содержит только свойства (properties), не содержит методы.
  • JSON требует использования двойных кавычек (double quotes) для строк и имен атрибутов. Одиночные кавычки (Single quotes) недействительны.
  • Даже просто неправильно поставленная запятая или двоеточие (colon) могут создать ошибку в файле JSON и не работать. Поэтому вы должны быть осторожны при проверке любых данных, которые хотите использовать.

2- JSON.parse(..)

Используя метод  JSON.parse(text) поможет вам анализировать данные JSON и конвертировать его в объект.
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(..)

Используя метод  JSON.stringify(obj) поможет вам конвертировать объект  Javascript в текст в формате  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)

Метод  JSON.stringify(obj) используется для конвертирования obj в String. Если объект  obj имеет метод  toJSON(), то данный метод будет вызван для возвращения String, если наоборот то он конвертирует по правилам по умолчанию:
  1. Number, Boolean, String будут конвертированы в примитивные значения (primitive).
  2. Infinity, NaN будут конвертированы в null.
  3. Если obj является undefined, Function, Symbol, он будет конвертирован в undefined.
  4. undefined, Function, Symbol если появляется в объекте, то будет пропущен.
  5. undefined, Function, Symbol если появляется в массиве, то будет конвертирован в null.
  6. Все свойства (property) имеющие ключ Symbol, будут пропущены.
  7. Объект Date с методом toJSON() возвращают String, похожий на date.toISOString(), поэтому с ним обращаются как с 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"]}

 
Пример:
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]])

Метод  JSON.stringify(..) на самом деле имеет 3 параметра, в которых второй и третий не обязательны.
Параметры:
obj
  • Объект будет конвертирован в строку JSON.
replacer
  • replacer может быть функцией для настройки поведения в процессе конвертирования объекта в строку JSON.
  • replacer может быть массивом у String, он помогает определить белый список (whitelist) свойств (property), которые появятся в строке JSON.
space
  • space может быть строкой (Если длиннее 10 символов, он будет усечен до 10 символов). Используется для вставки в JSON, помогает сделать JSON красивее, аккуратнее.
  • space может быть число меньше или равным 10 (Если больше 10, он будет считаться как 10). Используется для определения строки, содержащей 'space' символ пробела (space), данная строка будет вставлена в JSON, помогает сделать JSON красивее, аккуратнее.

Примеры:

Пример с параметром  replacer это массив  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"}]}
 

 
Пример с параметром  replacer, являющаяся функцией:
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}'
 
Пример с параметром  replacer, являющейся функцией и параметр  obj это массив.
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]
 
Пример с параметром  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
// -----]
// }"