Обычно JSON используется для обмена данными с веб-сервером.
При получении данных с веб-сервера данные всегда представляют собой строку.
Проанализируйте данные с помощью JSON.parse()
, и данные станут объектом JavaScript.
Представьте, что мы получили этот текст с веб-сервера:
'{"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>
Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object from a JSON String</h2>
<p id="demo"></p>
<script>
const txt = '{"name":"John", "age":30, "city":"New York"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>
При использовании JSON.parse()
для JSON, полученного из массива, метод будет вернуть массив JavaScript вместо объекта JavaScript.
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);
Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>
<script>
const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script>
</body>
</html>
Объекты даты не разрешены в 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;
Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>Convert a string into a date object.</h2>
<p id="demo"></p>
<script>
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;
</script>
</body>
</html>
Или вы можете использовать второй параметр функции 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;
Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>Convert a string into a date object.</h2>
<p id="demo"></p>
<script>
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;
</script>
</body>
</html>
Функции не разрешены в 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();
Попробуйте сами →
<!DOCTYPE html>
<html>
<body>
<h2>Convert a string into a function.</h2>
<p id="demo"></p>
<script>
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();
</script>
</body>
</html>
Вам следует избегать использования функций в JSON, функции потеряют свою область видимости. и вам придется использовать eval()
, чтобы преобразовать их обратно в функции.