JSON.parse()

Обычно JSON используется для обмена данными с сервером.

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

Если обработать эти данные при помощи функции JSON.parse(), то они станут объектом JavaScript.

Парсинг данных JSON

Представьте, что с сервера мы получили такой текст:

'{ "name":"John", "age":30, "city":"New York"}'

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

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Внимание! Убедитесь, что преобразуемый текст записан в формате 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, а не объект.

В следующем примере возвращенные с сервера данные 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

Парсинг дат

Объекты даты и времени (тип Date) нельзя использовать в JSON.

Если вам необходимо включить в данные дату, записывайте ее как строку.

Когда это потребуется, вы сможете преобразовать ее обратно в объект:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Либо можно воспользоваться вторым параметром функции JSON.parse().

В качестве второго параметра передается функция, которая проверяет каждое свойство перед тем, как вернуть его значение.

В следующем примере строка преобразуется в объект даты, при помощи второго параметра JSON.parse():

 var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
 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":"John", "age":"function () {return 30;}", "city":"New York"}';
 var obj = JSON.parse(text);
 obj.age = eval("(" + obj.age + ")");

 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

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

Поддержка браузерами

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

Для более старых браузеров существует специальная библиотека JavaScript https://github.com/douglascrockford/JSON-js.