Post

ajax Map타입 데이터 전송 안될 때

ajax Map타입 데이터 전송 안될 때

문제

  • ajax request body에 typescript에서 제공하는 set, map type의 데이터를 전송하려할 null로 전송되는 현상이 있었다.

원인

  • ajax 는 기본적으로 javascript 객체를 json 형식으로 직렬화하여 전송하는데, set과 map은 json으로 직렬화할 수 있는 일반적이 객체가 아니기 때문에 전송이 안되었다.

해결

  • set, map type의 데이터를 직렬화가 가능한 object나 array로 변환하여 전송하면 된다.

  • 방식 1-1. Object.fromEntries 사용하여 일반 객체로 변환
    1
    2
    3
    
    const set = new Set([1, 2, 3]);
    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
    axios.post('url', { set: Object.fromEntries(set), map: Object.fromEntries(map) }); // { set: { 1: 1, 2: 2, 3: 3 }, map: { a: 1, b: 2, c: 3 } }
    
  • 방식 1-2. …spread 사용하여 일반 객체로 변환
    1
    2
    3
    
    const set = new Set([1, 2, 3]);
    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
    axios.post('url', { set: { ...set }, map: { ...map } }); // { set: { 1: 1, 2: 2, 3: 3 }, map: { a: 1, b: 2, c: 3 } }
    
  • 방식 2. Array.from 사용하여 배열로 변환
    1
    2
    3
    
    const set = new Set([1, 2, 3]);
    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
    axios.post('url', { set: Array.from(set), map: Array.from(map) });
    
This post is licensed under CC BY 4.0 by the author.