JSON.parse()
JSON зазвичай використовується для обміну даними з вебсервером.
При отриманні даних із вебсервера ці дані завжди є рядком.
Проаналізуйте дані за допомогою JSON.parse()
, і дані стануть об’єктом JavaScript.
Приклад. Розбір JSON
Уявіть, що ми отримали цей текст із вебсервера:
'{"name":"John", "age":30, "city":"New York"}'
Використовуйте функцію JavaScript JSON.parse()
, щоб перетворити текст на об’єкт JavaScript:
const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
Переконайтеся, що текст має формат JSON, інакше ви отримаєте синтаксичну помилку.
Використовуйте об’єкт JavaScript на своїй сторінці:
Приклад
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name;
</script>
Спробуйте самі »
Масив як JSON
У разі використання JSON.parse()
для JSON, отриманого з масиву, метод повертатиме масив JavaScript замість об’єкта JavaScript.
Приклад
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);
Спробуйте самі »
Винятки
Дати розбору
Об’єкти дати не дозволені в JSON.
Якщо потрібно включити дату, запишіть її у вигляді рядка.
Ви можете пізніше перетворити його назад на об’єкт дати:
Приклад
Перетворення (конвертація) рядка на дату:
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
Спробуйте самі »
Або ви можете використати другий параметр функції JSON.parse()
під назвою reviver.
Параметр reviver — це функція, яка перевіряє кожну властивість перед поверненням значення.
Приклад
Перетворіть рядок на дату за допомогою функції reviver:
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
Спробуйте самі »
Функції аналізу (парсингу)
Функції не дозволені в JSON.
Якщо вам потрібно включити функцію, запишіть її у вигляді рядка.
Ви можете пізніше перетворити його на функцію:
Приклад
Перетворення рядка на функцію:
const text = '{"name":"John", "age":"function () {return 30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
Спробуйте самі »
Вам слід уникати використання функцій у JSON, функції втратять область видимості, і вам доведеться використовувати eval()
, щоб перетворити їх назад у функції.