Приклади об’єктів JSON: Пояснення методів Stringify та Parse

JSON Stringify

JSON.stringify()Метод перетворює JSON-безпечне значення JavaScript для сумісної рядки JSON.

Що таке значення, безпечні для JSON, можна запитати! Давайте складемо список усіх небезпечних для JSON значень, і все, що не входить до списку, може вважатися безпечним для JSON.

Небезпечні значення JSON:

  • undefined
  • function(){}
  • (ES6 +) Symbol
  • Об’єкт із круговими посиланнями

Синтаксис

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

У найпростішому та найбільш використовуваному вигляді:

 JSON.stringify( value )

Параметри

value : Значення JavaScript, яке потрібно "розрядити".

replacer : (Необов’язково) Функція або масив, який служить фільтром для властивостей об’єкта значення, який повинен бути включений у рядок JSON.

space: (Необов’язково) Числове або рядкове значення для надання відступу для рядка JSON. Якщо вказано числове значення, стільки пробілів (до 10) виконують роль відступу на кожному рівні. Якщо вказано значення рядка, цей рядок (до перших 10 символів) діє як відступ на кожному рівні.

Тип повернення

Повертається тип методу: string.

Опис

Значення, безпечні для JSON, перетворюються у відповідні форми рядків JSON. З іншого боку, небезпечні значення JSON повертають:

  • undefined якщо вони передаються методу як значення
  • null якщо вони передані як елемент масиву
  • нічого, якщо передається як властивість об’єкта
  • викидає помилку, якщо це об'єкт із циклічними посиланнями.
 //JSON-safe values JSON.stringify({}); // '{}' JSON.stringify(true); // 'true' JSON.stringify('foo'); // '"foo"' JSON.stringify([1, 'false', false]); // '[1,"false",false]' JSON.stringify({ x: 5 }); // '{"x":5}' JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) // '"2006-01-02T15:04:05.000Z"' //JSON-unsafe values passed as values to the method JSON.stringify( undefined ); // undefined JSON.stringify( function(){} ); // undefined //JSON-unsafe values passed as array elements JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); // '{"x":[10,null,null,null]}' //JSON-unsafe values passed as properties on a object JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); // '{}' //JSON-unsafe object with circular reference on it var o = { }, a = { b: 42, c: o, d: function(){} }; // create a circular reference inside `a` o.e = a; // would throw an error on the circular reference // JSON.stringify( a );

JSON.stringify(...)поводиться інакше, якщо переданий йому об'єкт має toJSON()визначений метод. Повернене значення toJSON()методу буде серіалізовано замість самого об'єкта.

Це надзвичайно зручно, коли об’єкт містить будь-яке незаконне значення JSON.

 //JSON-unsafe values passed as properties on a object var obj = { x: undefined, y: Object, z: Symbol('') }; //JSON.stringify(obj); logs '{}' obj.toJSON = function(){ return { x:"undefined", y: "Function", z:"Symbol" } } JSON.stringify(obj); //"{"x":"undefined","y":"Function","z":"Symbol"}" //JSON-unsafe object with circular reference on it var o = { }, a = { b: 42, c: o, d: function(){} }; // create a circular reference inside `a` o.e = a; // would throw an error on the circular reference // JSON.stringify( a ); // define a custom JSON value serialization a.toJSON = function() { // only include the `b` property for serialization return { b: this.b }; }; JSON.stringify( a ); // "{"b":42}"

replacer

Як replacerуже згадувалося раніше, це фільтр, який вказує, які властивості слід включити до рядка JSON. Це може бути масив або функція. Коли масив, замінник містить рядкові подання лише тих властивостей, які повинні бути включені в рядок JSON.

 var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; JSON.stringify(foo, ['week', 'month']); // '{"week":45,"month":7}', only keep "week" and "month" properties

Якщо replacerє функцією, вона буде викликана один раз для самого об'єкта, а потім один раз для кожної властивості об'єкта, і кожен раз передається два аргументи, ключ і значення . Щоб пропустити ключ у серіалізації, його undefinedслід повернути. В іншому випадку надане значення слід повернути. Якщо будь-яке з цих значень є самими об'єктами, replacerфункція також серіалізує їх рекурсивно.

 function replacer(key, value) { // Filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'Mozilla', model: 'box', week: 45, transport: 'car', month: 7}; JSON.stringify(foo, replacer); // '{"week":45,"month":7}'

Якщо масив передається JSON.stringify()і replacerповертається undefinedдля будь-якого з його елементів, значення елемента замінюється на null. replacerфункції не можуть видалити значення з масиву.

 function replacer(key, value) { // Filtering out properties if (typeof value === 'string') { return undefined; } return value; } var foo = ['Mozilla', 'box', 45, 'car', 7]; JSON.stringify(foo, replacer); // "[null,null,45,null,7]"

space

spaceПараметр , який використовується для відступів робить результат JSON.stringify()покращала.

 var a = { b: 42, c: "42", d: [1,2,3] }; JSON.stringify( a, null, 3 ); // "{ // "b": 42, // "c": "42", // "d": [ // 1, // 2, // 3 // ] // }" JSON.stringify( a, null, "-----" ); // "{ // -----"b": 42, // -----"c": "42", // -----"d": [ // ----------1, // ----------2, // ----------3 // -----] // }"

JSON Синтаксичний розбір

JSON.parse()Метод аналізує рядок і створити новий об'єкт , описаний в рядку.

Синтаксис:

 JSON.parse(text [, reviver])

Параметри:

text Рядок для синтаксичного аналізу як JSON

reviver(Необов'язково) Функція буде отримувати keyі в valueякості аргументів. Цю функцію можна використовувати для перетворення значення результату.

Ось приклад використання JSON.parse():

var data = '{"foo": "bar"}'; console.log(data.foo); // This will print `undefined` since `data` is of type string and has no property named as `foo` // You can use JSON.parse to create a new JSON object from the given string var convertedData = JSON.parse(data); console.log(convertedData.foo); // This will print `bar

Repl.it Demo

Ось приклад з reviver:

var data = '{"value": 5}'; var result = JSON.parse(data, function(key, value) { if (typeof value === 'number') { return value * 10; } return value; }); // Original Data console.log("Original Data:", data); // This will print Original Data: {"value": 5} // Result after parsing console.log("Parsed Result: ", result); // This will print Parsed Result: { value: 50 }

У наведеному вище прикладі всі числові значення множаться на 10- Repl.it Demo

Більше інформації про JSON:

  • Синтаксис JSON
  • Перетворіть свій веб-сайт у мобільний додаток із 7 рядками JSON