JSON.parse()

Обычное использование JSON – передача данных между веб-сервером и клиентом.

При получении данных с веб-сервера данные всегда являются строками.

через JSON.parse() Парсинг данных, которые станут объектом JavaScript.

Пример – парсинг JSON

Представьте себе, что мы получаем этот текст от веб-сервера:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

Используйте функцию JavaScript JSON.parse() Преобразуйте текст в объект JavaScript:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

Убедитесь, что этот текст написан в формате 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) {
        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, производного от массива JSON.parse() после этого метод вернет массив JavaScript, а не объект JavaScript.

Пример

JSON, возвращаемый сервером, является массивом:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        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":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Попробуйте сами

или вы можете использовать JSON.parse() Второй параметр функции, называемый reviver.

Этот reviver Параметр является функцией, которая проверяет каждый атрибут перед возвращением значения.

Пример

Преобразование строки в дату, используя функцию reviver:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
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":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

Попробуйте сами

Вы должны избегать использования функций в JSON, так как они теряют свою область видимости, и вам также нужно использовать eval() Переведите их обратно в функции.

Поддержка браузеров

Все основные браузеры и最新的 стандарт ECMAScript (JavaScript) включают JSON.parse() Функция:

Числа в таблице указывают на полную поддержку JSON.parse() Первая версия браузера функции:

Да 8.0 3.5 4.0 10.0

Для более старых браузеров доступны следующие адреса JavaScript библиотек:

https://github.com/douglascrockford/JSON-js