Map을 포함한 Object JSON stringify

interface MyType {
  id: number;
  cover: string;
  outComes: Map<number, string>;
  questions: Map<number, Map<number, string>>;
}

const stringify = (object: any) => {
  for (const eachIdx in object) {
    if (object[eachIdx] instanceof Map) {
      object[eachIdx] = Array.from(object[eachIdx]);
      stringify(object);
    } else if (typeof object[eachIdx] == 'object') stringify(object[eachIdx]);
  }
  return JSON.stringify(object, null, 2);
};

const jsonString2ObjectWithMap = <ReturnType>(
  jsonString: string
): ReturnType => {
  const object = JSON.parse(jsonString);
  console.log(`-------------변환전`);
  console.log(object);

  const jsonstringToObject = (object) => {
    for (const eachIdx in object) {
      if (
        object[eachIdx] instanceof Array &&
        object[eachIdx].length > 0 &&
        object[eachIdx][0].constructor === Array
      ) {
        object[eachIdx] = new Map(object[eachIdx]);
        jsonstringToObject(object);
      } else if (typeof object[eachIdx] == 'object')
        jsonstringToObject(object[eachIdx]);
    }

    return object;
  };

  console.log(`-------------변환후`);
  const result = jsonstringToObject(object);

  console.log(result);

  return result;
};

실행

const myObject: MyType = {
  id: 30,
  cover: 'cover',
  outComes: new Map([
    [0, 'o1'],
    [1, 'o2'],
  ]),
  questions: new Map([
    [
      0,
      new Map([
        [1, 'answer1'],
        [2, 'ansewr2'],
      ]),
    ],
    [
      1,
      new Map([
        [1, 'ansewr1'],
        [2, 'ansewr2'],
      ]),
    ],
    [2, new Map([])],
  ]),
};

console.log(`-----------------map을 포함한 오브젝트 json stringify`);
const rst = stringify(myObject);
console.log(rst);
console.log(typeof rst);

console.log(`-----------------다시 오브젝트화`);
const result = jsonString2ObjectWithMap<MyType>(rst);

output

-----------------map을 포함한 오브젝트 json stringify
{
  "id": 30,
  "cover": "cover",
  "outComes": [
    [
      0,
      "o1"
    ],
    [
      1,
      "o2"
    ]
  ],
  "questions": [
    [
      0,
      [
        [
          1,
          "answer1"
        ],
        [
          2,
          "ansewr2"
        ]
      ]
    ],
    [
      1,
      [
        [
          1,
          "ansewr1"
        ],
        [
          2,
          "ansewr2"
        ]
      ]
    ],
    [
      2,
      []
    ]
  ]
}
string
-----------------다시 오브젝트화
-------------변환전
{
  id: 30,
  cover: 'cover',
  outComes: [ [ 0, 'o1' ], [ 1, 'o2' ] ],
  questions: [ [ 0, [Array] ], [ 1, [Array] ], [ 2, [] ] ]
}
-------------변환후
{
  id: 30,
  cover: 'cover',
  outComes: Map { 0 => 'o1', 1 => 'o2' },
  questions: Map { 0 => [ [Array], [Array] ], 1 => [ [Array], [Array] ], 2 => [] }
}

상황

• 서버로 json 형태로 값을 전달하고 싶은데…
• Map은 json stringify로 변환되지 않는다
• 변환하기 위해서는 한번 Array로 변환한 다음에야 가능했다
• 어떤 객체에 맵이 중첩으로 사용된 경우 수동으로 바꿔주는 게 귀찮다

해결

stringify.ts

const stringify = (object: any) => {
  for (const eachIdx in object) {
    if (object[eachIdx] instanceof Map) {
      object[eachIdx] = Array.from(object[eachIdx]);
      stringify(object);
    } else if (typeof object[eachIdx] == 'object') stringify(object[eachIdx]);
  }
  return JSON.stringify(object, null, 2);
};

• 객체 안 멤버들을 하나씩 돌아가면서 Map이거나 오브젝트인지 확인한다
• Map이면은 JSON stringify 할 수 있는 Array로 변환한다
• 오브젝트이면 중첩되어있는 Map을 찾기 위해 재귀적으로 반복한다

사용법

• myObject와 같은 중첩 map을 포함하고 있고,
• 포함되어있는 Map이 Map<number,string> 일 경우에만 때만 테스트해보아서, 더 다양한 경우에도 동작할지는 모르겠다

• input : { a:… } 처럼 오브젝트를 넣어야 한다
• console.log 찍어봤을 때 { }로 묶여있는…
• 만약에 그냥 Map인 경우에는 이런 식으로 { a: new Map() } 한번 감싸주면 된다

repo

• https://github.com/chinsun9/map2json