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

Что такое JSON?
JSON.parse(..)
JSON.stringify(..)

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, если наоборот то он конвертирует по правилам по умолчанию:

Number, Boolean, String будут конвертированы в примитивные значения (primitive).
Infinity, NaN будут конвертированы в null.
Если obj является undefined, Function, Symbol, он будет конвертирован в undefined.
undefined, Function, Symbol если появляется в объекте, то будет пропущен.
undefined, Function, Symbol если появляется в массиве, то будет конвертирован в null.
Все свойства (property) имеющие ключ Symbol, будут пропущены.
Объект 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
// -----]
// }"

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

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

2. JSON.parse(..)

3. JSON.stringify(..)

Pуководства ECMAScript, Javascript

Pуководства ECMAScript, Javascript

Новейшие статьи