Как использовать JSON.parse() и JSON.stringify()

Введение

Объект JSON, доступный во всех современных браузерах, имеет два полезных метода для работы с содержимым в формате JSON: parse и stringify.

JSON.parse()

JSON.parse() берет строку JSON и преобразует ее в объект JavaScript.

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr);

console.log(userObj);

Выполнение этого кода приведет к следующему выводу:

Output
{name: 'Sammy', email: 'sammy@example.com', plan: 'Pro'}
  email: "sammy@example.com"
  name: "Sammy"
  plan: "Pro"

Запятые в конце недопустимы в JSON, поэтому JSON.parse() выдает ошибку, если переданная ему строка содержит запятые в конце.

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

Здесь значения объекта преобразуются в верхний регистр в возвращаемом объекте метода parse:

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

console.log(userObj);

Выполнение этого кода приведет к следующему выводу:

Output
{name: 'SAMMY', email: 'SAMMY@EXAMPLE.COM', plan: 'PRO'}
  email: "SAMMY@EXAMPLE.COM"
  name: "SAMMY"
  plan: "PRO"

Значения были преобразованы в символы верхнего регистра.

JSON.stringify()

JSON.stringify() принимает объект JavaScript и преобразует его в строку JSON.

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStr = JSON.stringify(userObj);

console.log(userStr);

Выполнение этого кода приведет к следующему выводу:

Output
{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}

JSON.stringify() может принимать два дополнительных аргумента. Первая — это функция replacer. Второе — это значение String или Number, используемое в качестве пробела в возвращаемой строке.

Функцию replacer можно использовать для фильтрации значений, так как любое значение, возвращаемое как undefined, будет не входить в возвращаемую строку:

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

let userStrReplacer = JSON.stringify(userObj, replacer);

console.log(userStrReplacer);

Выполнение этого кода приведет к следующему выводу:

Output
{"name":"Sammy","plan":"Pro"}

Пара ключ-значение email удалена из объекта.

И пример с переданным аргументом space:

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStrSpace = JSON.stringify(user, null, '...');

console.log(userStrSpace);

Выполнение этого кода приведет к следующему выводу:

Output
{
..."name": "Sammy",
..."email": "sammy@example.com",
..."plan": "Pro"
}

Отступ заменен на ....

Заключение

В этом руководстве вы использовали методы JSON.parse() и JSON.stringify(). Если вы хотите узнать больше о работе с JSON в Javascript, ознакомьтесь с нашим руководством по работе с JSON в JavaScript.

Для получения дополнительной информации о программировании в JavaScript посетите нашу страницу с темами JavaScript, посвященную упражнениям и проектам по программированию.