[자바스크립트] input value 에 JSON으로 데이터 전달하기

input 태그에 에 JSON으로 데이터 전달

input 태그를 사용하다 보면 value 값으로 데이터를 한 번에 여러개를 전달하는 일이 생깁니다.

그냥 일차원 적으로 value="값1, 값2, 값3" 이렇게 생각을 할 수도 있는데, 이렇게 코딩을 하면

value 값을 자바스크립트로 뽑아낼 수는 있으나.. 비효율적인 코딩 입니다.

한 번에 여러 데이터를 전달하고 싶다면, Key : Value 로 이루어진 오브젝트 형인 JSON 형태로 전달을 하는게 깔끔합니다.

JSON

JSON은 Key : Value 로 구성하여 만듭니다.

{
  key1 : value1,
  key2 : value2,
  key3 : value3,
  key4 : value4,
  key5 : value5
}

반응형

JSON 데이터 전달하기

<input type="hidden" id="test" value="">

let jsonTest = {
                 no : 1,
                 productName : "컴퓨터",
                 price : 200000
               };


$("#test").val(jsonTest);

이렇게 하면 간단하게 데이터는 전달이 됩니다.

하지만 전달된 데이터를 확인해보면 value="[object Object]" 형식의 단순한 텍스트가 들어가버립니다.

그냥 텍스트입니다. 그래서 JSON 데이터를 전달할 때에는 String 으로 변환해서 전달해야 합니다.

$('#test').val(JSON.stringify(jsonTest));

728x90

JSON 데이터 가져오기

가져올 때는 전달 할 때와 반대로, String을 JSON 으로 변환하여 가져와야 합니다.

let data = JSON.parse($('#test').val()); 

 

주의사항

input에 JSON 형태의 문자열을 미리 셋팅하거나 스크립트단에서 문자열로 태그 생성 후 html에 밀어 넣어줄 때 주의해야 될 점이 있습니다.

input value에 쌍따옴표(")를 넣게 되면 인식 값으로 인식을 못하고 데이터가 끊기는 현상이 나타나기 때문에 쌍다옴표를 치환해서 넣어줘야 합니다.