Обычно JSON используется для обмена данными с веб сервером.
При получении данных с веб сервера они всегда представляют собой строку.
Проанализируйте данные с помощью JSON.parse(), и данные становятся объектом JavaScript.
Пример - JSON.parse()
Представьте, что мы получили этот текст с веб сервера:
'{"name":"Андрей", "age":50, "city":"Пермь"}'
Используйте функцию JavaScript JSON.parse() для преобразования текста в объект JavaScript:
var obj = JSON.parse('{"name":"Андрей", "age":50, "city":"Пермь"}');
Убедитесь, что текст написан в формате JSON, иначе вы получите синтаксическую ошибку.
Используйте объект JavaScript на своей странице:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
Попробуйте сами »
JSON с сервера
Вы можете запросить JSON с сервера, используя AJAX запрос
Пока ответ от сервера записан в формате JSON, вы можете проанализировать строку в объект JavaScript.
Используйте XMLHttpRequest для получения данных с сервера:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200) {
var myObj =
JSON.parse(this.responseText);
document.getElementById("demo").innerHTML
= myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
Попробуйте сами »
Взгляните на json_demo.txt
JSON массив
При использовании JSON.parse() на JSON, производном от массива, метод вернет массив JavaScript, а не объект JavaScript.
JSON, возвращенный с сервера, представляет собой массив:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML
= myArr[0];
}
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
Попробуйте сами »
Взгляните на json_demo_array.txt
Исключения
Разбор дат
Объекты дат не допускаются в JSON.
Если вам нужно включить дату, запишите ее в виде строки.
Вы можете преобразовать его обратно в объект даты позже:
Преобразование строки в дату:
var text =
'{"name":"Андрей", "birth":"1969-07-15", "city":"Пермь"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
Попробуйте сами »
Или вы можете использовать второй параметр JSON.parse(), называемая reviver.
Параметр reviver - это функция, которая проверяет каждое свойство перед возвращением значения.
Преобразовать строку в дату, используя функцию восстановления:
var text = '{"name":"Андрей", "birth":"1969-07-15", "city":"Пермь"}';
var 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.
Если вам нужно включить функцию, запишите ее в виде строки.
Вы можете преобразовать его обратно в функцию позже:
Преобразование строки в функцию::
var text =
'{"name":"Андрей", "age":"function () {return
50;}", "city":"Пермь"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +
obj.age();
Попробуйте сами »
Вы должны избегать использования функций в JSON, функции потеряют свою область действия,
и вам придется использовать eval(), чтобы преобразовать их обратно в функции.
Поддержка браузеров
Функция JSON.parse() включена во все основные браузеры и в новейший стандарт ECMAScript (JavaScript).
Числа в таблице ниже указывают первую версию браузера, которая полностью поддерживает функция JSON.parse():
| Да | 8.0 | 3.5 | 4.0 | 10.0 |
Для старых браузеров библиотека JavaScript доступна по адресу https://github.com/douglascrockford