JavaScript - HTML onClick 파라미터로 Object 넘기기

개요

동적으로 <Table> 태그에 하위 요소를 넣어야하는 작업이 있었는데, onClick 이벤트로 Object를 전부 넘기고 싶었다.

 

하지만 onClick 이벤트로 함수를 만들어 넘길 때 Object를 콘솔로 확인해보니 [Object Object] 로 뜨며 정상적인 상태가 아니었다.

 

 

해결방법

구글링에선 다양한 방법들이 제시되었지만, 딱히 유효한 방법을 찾지못하다가 생각난게

 

dataset 이다. onClick=functionName(this) data-value=object 식으로 넘기면 가능할거같았다.

 

예제코드

const htmlTable = $("#table");
for(...) {
	htmlTable.append(`<tr> 
    	<td onclick='testFunction(this)' data-value='${JSON.stringfy(obj)}'></td>
        </tr>`);
}

 

그냥 Object를 넘기면 값이 제대로 넘어가지 않아서 JSON.stringfy로 문자열로 만들어 넘겼고, this 로 이 값이 함께 넘어간다.

 

그리고 받는 함수에서 이를 다시 JSON.parse 로 변환해서 사용하면 json 문자열을 다시 object로 변환할 수 있다.

 

function testFunction(json) {
	const obj = JSON.parse(json.dataset.value);
    console.log(obj);
}

 

dataset 은 태그에 data-이름 을 붙여서 문자열등 값을 넘길 수 있는 편리한 기능이며 이를 꺼낼땐 dataset.이름을 통해 꺼내올 수도 있고 그외에도 getAttribute('이름') 등을 통해서도 가져올 수 있다.