Узнайте, как быстро преобразовать строку JSON в карту в JavaScript.

Чтобы преобразовать JSON в Map в JavaScript:

  1. Разберите строку JSON на объект с помощью метода JSON.parse() .
  2. Вызовите Object.entries() с этим объектом в качестве аргумента.
  3. Передайте результат Object.entries() конструктору Map().

Например:

const json =
  '{"user1":"John","user2":"Kate","user3":"Peter"}';
const map = new Map(Object.entries(JSON.parse(json)));
// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(map);

Сначала мы преобразуем строку в объект, а затем в массив, потому что мы не можем напрямую преобразовать строку JSON в Map. Метод Object.entries() принимает объект и возвращает список пар ключ-значение, соответствующих ключу и значению каждого свойства объекта:

const obj = {
  user1: 'John',
  user2: 'Kate',
  user3: 'Peter',
};
const arr = Object.entries(obj);
// [ [ 'user1', 'John' ], [ 'user2', 'Kate' ], [ 'user3', 'Peter' ] ]
console.log(arr);

Конструктор Map() может использовать итерацию пар ключ-значение для создания элементов Map, поэтому мы передаем результат Object.entries() непосредственно ему.

Преобразовать карту в JSON

Чтобы преобразовать Map обратно в строку JSON, вызовите метод Object.fromEntries() с Map в качестве аргумента и передайте результат методу JSON.stringify():

const json =
  '{"user1":"John","user2":"Kate","user3":"Peter"}';
const map = new Map(Object.entries(JSON.parse(json)));
const jsonFromMap = JSON.stringify(Object.fromEntries(map));
// {"user1":"John","user2":"Kate","user3":"Peter"}
console.log(jsonFromMap);

Сначала мы преобразуем Map в Object.fromEntries(), потому что мы не можем напрямую сериализовать Map в строку JSON. Метод Object.fromEntries() преобразует любой список пар ключ-значение в объект:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);
const obj = Object.fromEntries(map);
// { user1: 'John', user2: 'Kate', user3: 'Peter' }
console.log(obj);

Обновлено на: codingbeautydev.com

Получайте новые советы и руководства по веб-разработке каждую неделю

Подписаться

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.