웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 객체의 값이 배열인 경우 쿼리스트링으로 바꾸기

Last Modified : 2020-11-18 / Created : 2020-11-05
4,409
View Count

자바스크립트를 사용하여 객체의 값을 주소창의 퀴리스트링으로 변경하는 방법을 이 전에 알아보았는데요 ~ 이 번 글은 만약 객체가 배열 값을 가지는 경우의 해결 방법을 알아봅니다.

이전 글의 링크 바로가기 >
https://webisfree.com/2019-05-15/자바스크립트-객체를-쿼리스트링-값으로-바꾸기


왜 이 방법이 필요하냐면? 이유는 다음과 같습니다.
만약 객체의 값이 아래와 같은 경우 쿼리스트링으로 변환시 어떨세 나타날까요?
const myObj = {
  name: 'abc',
  keyword: [ 'web', 'is', 'free' ]
};

객체 myObj의 경우 name은 문자열을 값으로 가지고 있지만 keyword 의 경우 배열을 값으로 가지고 있습니다. 그래서 아래와 같이 변환되어 나타납니다.
/search?keyword=web,is,free&name=abc

배열의 값이 콤마로 변환되어 사용되었습니다. 이렇게 사용해도 문제가 없을까요?

물론 서버에서 어떻게 코드를 작성하여 설정하느냐에 따라 이 방법도 충분히 사용할 수 있겠습니다. 다만 쿼리스트링에 콤마는 구분자 역할을 해야만 한다는 의존성을 가져야 하겠죠.



! 쿼리스트링 서버에서 배열로 전달 받기


즉 배열로 전달 받기 위해서 위의 값보다 아래처럼 쿼리스트링 값을 가지도록 하려고합니다.
/search?keyword=web&keyword=is&keyword=free

콤마가 아닌 동일한 키가 여러개 생성되어 서버에서 배열 타입으로 전달 받을 수 있겠죠. 그럼 어떻게 하면 될까요?

해결방법은 다음과 같습니다.
const queryStr = Object.entries(myObj).map(item => item.join('=').replace(/,/g, '&'+item[0]+'=')).join('&');

이 전에 사용하였던 방법과 비슷하지만 다른 부분이 보입니다. 바로 map에 사용된 함수에 replace()의 정규식을 사용한 부분이 보이죠. 여기서는 콤마의 값을 모두 키 값과 등호 기호로 바꾸어 변경하는 코드가 추가되었습니다.


여기까지 객체의 값 중에 배열이 사용된 경우 쿼리스트링으로 변경하는 방법을 알아보았습니다.

Previous

자바스크립트에서 URLSearchParams 사용하여 주소 쿼리스트링, 파라미터 변경하기

Previous

자바스크립트 커서 위치 및 선택 영역에 텍스트 및 엘리먼트 추가하기