JSON.parse()

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

При получении данных от сервера это обычно строка.

Мы можем использовать метод JSON.parse() для преобразования данных в объект JavaScript.

Синтаксис

JSON.parse(text[, reviver])

Описание параметров:

  • text:Обязательный, корректная строка JSON.
  • reviver:Необязательный, функция, которая преобразует результат, вызываемая для каждого члена объекта.

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

Например, мы получили следующие данные от сервера:

{ "name":"example", "alexa":10000, "site":"www.example.com" }

Мы используем метод JSON.parse() для обработки вышеуказанных данных и преобразования их в объект JavaScript:

var obj = JSON.parse('{ "name":"example", "alexa":10000, "site":"www.example.com" }');

Перед парсингом убедитесь, что ваши данные имеют стандартный формат JSON, иначе может возникнуть ошибка.

Вы можете использовать наш онлайн-инструмент для проверки:https://www.jyshare.com/front-end/53。

После завершения парсинга мы можем использовать данные JSON на веб-странице:

Пример

<p id="demo"></p> <script> var obj = JSON.parse('{ "name":"example", "alexa":10000, "site":"www.example.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site; </script>

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

Получение JSON-данных с сервера

Мы можем использовать AJAX для запроса данных JSON с сервера и их преобразования в объект JavaScript.

Пример

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", "/try/ajax/json_demo.txt", true); xmlhttp.send();

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

Посмотреть данные сервера:

Получение данных массива JSON с сервера

Если данные, полученные с сервера, являются массивом JSON, JSON.parse преобразует их в массив JavaScript:

Пример

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; } }; xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true); xmlhttp.send();

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

Посмотреть данные сервера:

Исключения

Разбор данных

JSON не может хранить объекты Date.

Если вам нужно сохранить объект Date, его необходимо преобразовать в строку.

Позже преобразуйте строку обратно в объект Date.

Пример

var text = '{ "name":"Example", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "Дата создания:" + obj.initDate;

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

Мы можем задействовать второй параметр JSON.parse — reviver, функцию, которая преобразует результат и вызывается для каждого члена объекта.

Пример

var text = '{ "name":"Example", "initDate":"2013-12-14", "site":"www.example.com"}'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; }}); document.getElementById("demo").innerHTML = obj.name + "Дата создания:" + obj.initDate;

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

Функции парсинга

JSON не допускает функции, но вы можете сохранить функцию в виде строки, а позже преобразовать строку обратно в функцию.

Пример

var text = '{ "name":"Example", "alexa":"function () {return 10000;}", "site":"www.example.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + "Рейтинг Alexa:" + obj.alexa();

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

Не рекомендуется использовать функции в JSON.

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

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

Поддерживается 8.0 3.5 4.0 10.0

Старые браузеры могут использовать сторонние библиотеки для поддержки:https://github.com/douglascrockford/JSON-js

Другие расширения