Руководство по работе с JSON.parse() и JSON.stringify()

Hark Labs2022-04-28 · 4 min read

Руководство по работе с JSON.parse() и JSON.stringify()

JSON означает JavaScript Object Notation. Он используется для описания JavaScript объектов. Это формат обмена данными, который задает значения данных с помощью пар ключ-значение. Объект JSON поддерживается всеми основными браузерами. Этот учебник предполагает, что вы знакомы с JavaScript и работой с объектом JSON. Чтобы ознакомиться с JSON, вы можете взглянуть на наш обзор формата обмена данными JSON. Вы также можете узнать, как работать с JSON в JavaScript.

Формат JSON также используется для передачи данных по сети. Для этой цели данные необходимо сериализовать и десериализовать. Когда данные находятся в формате JSON, они преобразуются в строку с помощью метода stringify. Чтобы преобразовать данные обратно в формат объекта для манипуляций, используется метод parse. В этом руководстве мы рассмотрим шаги по использованию JSON.parse() и JSON.stringify(). Давайте начнем!

JSON.parse()

Этот метод используется для преобразования строки JSON в объект JSON, чтобы им можно было управлять программно. Передаваемая строка должна быть валидной строкой JSON, иначе будет создано исключение. Эта строка может быть получена от любого веб-сервиса или удаленного приложения.

Этот метод принимает два параметра: строку и функцию callback, которую можно использовать для изменения строки перед ее преобразованием в объект. Предположим, мы получаем сообщение от веб-сервиса, содержащее статус действия, сообщение и код статуса. Ниже приведен простой пример того, как строку можно преобразовать в объект.

Код:

let json_string = '{"message":"Done with success", "status":200, "code":200}'
let server_obj = JSON.parse(json_string);
console.log(server_obj)

let json_string = '{"message":"Done with success", "status":200, "code":200}'

let server_obj = JSON.parse(json_string);

console.log(server_obj)

Вывод:

{message: 'Done with success', status: 200, code: 200}

1	{message: 'Done with success', status: 200, code: 200}

Частая проблема возникает, когда в конец строки добавляются лишние запятые, поэтому JSON.parse() выдает ошибку, если переданная ему строка содержит запятые в конце. Если вам нужно изменить значения, вы можете передать функцию callback в качестве второго аргумента.

Код:

let string = '{"name":"XYZ","email":"xyz@example.com"}';
let obj = JSON.parse(string, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
return value;
});

console.log(obj)

let string = '{"name":"XYZ","email":"xyz@example.com"}';

let obj = JSON.parse(string, (key, value) => {

if (typeof value === 'string') {

return value.toUpperCase();

}

return value;

});

console.log(obj)

Вывод:

{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

1	{name: 'XYZ', email: 'XYZ@EXAMPLE.COM'}

JSON.stringify()

Метод stringify делает прямо противоположное методу parse. В данном случае передается объект JSON, а возвращаемым значением является строка. Эту строку можно передать, например, в какой-либо другой удаленный веб-сервис, а затем снова преобразовать в объект JSON для манипуляций.

Код:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj);
console.log(str);

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj);

console.log(str);

Вывод:

{"message":"Done with success","status":200,"code":200}

1	{"message":"Done with success","status":200,"code":200}

Метод stringify может принимать два аргумента: методы replacer и spacer. Метод replacer можно использовать для замены или исключения любых значений в строке.

Код:

let obj = {message:"Done with success", status:200, code:200}
let str = JSON.stringify(obj, (key, value) => {
    if (status === 200) {
        return undefined;
    }
    return value;
});

console.log(str)

let obj = {message:"Done with success", status:200, code:200}

let str = JSON.stringify(obj, (key, value) => {

if (status === 200) {

return undefined;

}

return value;

});

console.log(str)

Вывод:

{"message":"Выполнено успешно","status":200,"code":200}

1	{"message":"Выполнено успешно","status":200,"code":200}

Когда spacer передается в качестве аргумента, каждый элемент массива или объекта располагается на отдельной строке с отступом, показывающим его глубину в иерархии объектов и массивов. Ниже приведен простой фрагмент кода, иллюстрирующий это.

Код:

let obj = {message:"Выполнено успешно", status:200, code:200}
let str = JSON.stringify(obj, null, "---");
console.log(str)

let obj = {message:"Выполнено успешно", status:200, code:200}

let str = JSON.stringify(obj, null, "---");

console.log(str)

Вывод:

{
---"message": "Выполнено успешно",
---"status": 200,
---"code": 200
}

{

---"message": "Выполнено успешно",

---"status": 200,

---"code": 200

}

Заключение

В этом руководстве мы рассмотрели два полезных метода для работы с содержимым в формате JSON. Объекты JSON используются повсеместно, и при создании современных приложений на JavaScript эти методы очень полезны. Чтобы узнать больше, ознакомьтесь со следующими руководствами в нашем блоге:

Приятного программирования!

Hark Labs

Автор · CloudSigma

Preslav Dobrev — креативный дизайнер в CloudSigma, сосредоточенный на формировании последовательного корпоративного образа с помощью традиционных и инновационных маркетинговых каналов. Он умело сочетает художественное видение со стратегическим маркетингом, создавая убедительные истории бренда.

Руководство по работе с JSON.parse() и JSON.stringify()

JSON.parse()

JSON.stringify()

Заключение

Hark Labs

Комментарии