json 데이터 input 테그에 데이터 셋팅 및 input 태그 데이터 초기화 관련 javascript소스

json 데이터를 가지고 와서 form 화면을 채우거나 modal창의 form내용을 초기화 해야 하는 경우 사용하는 javascript 소스 입니다.

(공통 소스가 필요해서 작업 했는데 추후 수정을 더 해서 계속 갱신할 예정 입니다.)

 

아래 나오는 targetObj 는 document.getElementById() 로 가지고온 최상위 노드 입니다.

 

--json -> input

 

--json key값을 기준으로 input태그 및 select등의 정보를 가지고 와서 데이터 셋팅(json key=input name이 동일 합니다.)

let keys = Object.keys(jsonData);
for (let i = 0; i < keys.length; i++) {
   let key = keys[i];

   let chilNode = targetObj.querySelector('input[name="'+key+'"]');
   if(chilNode==null || chilNode==undefined){chilNode = targetObj.querySelector('select[name="'+key+'"]');}
   if(chilNode==null || chilNode==undefined){chilNode = targetObj.querySelector('textarea[name="'+key+'"]');}

   if(chilNode!=null && chilNode!=undefined){
      inputSetData(key, chilNode, jsonData[key]);
   }
}

--전달 받은 input name, 대상node, 설정할 값을 기준으로 type에 맞춰서 데이터를 설정
function inputSetData(targetName, targetObj, targetValue){
   if(targetObj.type=="text" || targetObj.type=="textarea"){
      targetObj.value = targetValue;
   }else if(targetObj.type=="select-one" && targetObj.options!= undefined && targetObj.options.length>0){
      for(let i = 0; i < targetObj.options.length; i++) {
         if(targetObj.options[i].value==targetValue){
            targetObj.options[i].selected = true;
         }
      }
   }else if(targetObj.type=="checkbox" && targetObj!= undefined){
      let checkBoxList = document.getElementsByName(targetName);
      if(checkBoxList.length>0){
         for(let i = 0; i < checkBoxList.length; i++) {
            if(checkBoxList[i].value==targetValue){checkBoxList[i].checked=true;}
         }
      }
   }else if(targetObj.type=="radio"  && targetObj!= undefined){
      let radioList = document.getElementsByName(targetName);
      if(radioList.length>0){
         for(let i = 0; i < radioList.length; i++) {
            if(radioList[i].value==targetValue){radioList[i].checked=true;}
         }
      }
   }
}

 

--input 초기화

 

--input 태그 리스트 수집 최상위 노드 하위 노드를 전체 검색 text, select등의 정보를 수집 합니다.

function inputChildList(targetObj, inputList){
   let inputChildren = targetObj.children;
   if(inputChildren.length>0){
      for(let i = 0; i < inputChildren.length; i++) {
         if(inputChildren[i].type!=undefined && (inputChildren[i].type=="text" || inputChildren[i].type=="select-one" ||               inputChildren[i].type=="checkbox" || inputChildren[i].type=="radio" || inputChildren[i].type=="textarea")){
               inputList.push(inputChildren[i]);
         }
         inputChildList(inputChildren[i], inputList);
      }
   }
}

 

--대상 노드의 데이터를 초기화 합니다.

function inputReSetData(targetObj){
   if(targetObj.type=="text" || targetObj.type=="textarea"){
      targetObj.value = "";
   }else if(targetObj.type=="select-one" && targetObj.options!= undefined && targetObj.options.length>0){
      targetObj.options[0].selected = true;
   }else if(targetObj.type=="checkbox" && targetObj!= undefined){
      let checkBoxList = document.getElementsByName(targetObj.name);
      if(checkBoxList.length>0){
         for(let i = 0; i < checkBoxList.length; i++) {
            checkBoxList[i].checked=false;
         }
      }
   }else if(targetObj.type=="radio"  && targetObj!= undefined){
      let radioList = document.getElementsByName(targetObj.name);
      if(radioList.length>0){
         for(let i = 0; i < radioList.length; i++) {
            radioList[i].checked=false;
         }
      }
   }
}

 

let inputList = [];
inputChildList(targetObj, inputList);

 

for(let i = 0; i < inputList.length; i++) {
   inputReSetData(inputList[i]);
}