웰시코기궁디궁디
13
2020-09-21 17:20:18
3
218

json data 속성을 json->list(array)로 가져오기



<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
 </head>
 <body>
  
  <form>
	<select data='[{"EXPLANATION":"유형","CMCLASS":"USER_CHILDREN","APPID":"base","CONFIGFORMKIND":"USER_CHILDREN","CONFIGFORMIDX":1,"SORT":0,"CONFIGFORMNAME":"회원자녀","IDX":1,"KEY":"USERCHILDRENKIND"},{"EXPLANATION":"이름","CMCLASS":null,"APPID":"base","CONFIGFORMKIND":"USER_CHILDREN","CONFIGFORMIDX":1,"SORT":1,"CONFIGFORMNAME":"회원자녀","IDX":2,"KEY":"USERCHILDRENNAME"},{"EXPLANATION":"생년월일","CMCLASS":null,"APPID":"base","CONFIGFORMKIND":"USER_CHILDREN","CONFIGFORMIDX":1,"SORT":2,"CONFIGFORMNAME":"회원자녀","IDX":3,"KEY":"USERCHILDRENBIRTHDATE"},{"EXPLANATION":"성별","CMCLASS":"USER_GENDER","APPID":"base","CONFIGFORMKIND":"USER_CHILDREN","CONFIGFORMIDX":1,"SORT":3,"CONFIGFORMNAME":"회원자녀","IDX":4,"KEY":"USERCHILDRENGENDER"}]'>
		<option data=''>선택</option>
		<option data='{"USERCHILDRENGENDER":["100","100","100"],"USERCHILDRENNAME":["신채연","신채빈","신채아"],"USERCHILDRENBIRTHDATE":["2003-08-28","2005-11-14","2015-03-24"],"USERCHILDRENKIND":["800","800","800"]}'>타입3개</option>
		<option data='{"USERCHILDRENGENDER":["100","200"],"USERCHILDRENNAME":["김하은","김하랑"],"USERCHILDRENBIRTHDATE":["2015-01-30","2015-01-30"],"USERCHILDRENKIND":["800","800"]}'>타입2개</option>
		<option data='{"USERCHILDRENGENDER":["200","200","200"],"USERCHILDRENNAME":["김도윤","김태윤","김시윤"],"USERCHILDRENBIRTHDATE":["2009-01-14","2013-06-06","2015-10-06"],"USERCHILDRENKIND":["800","800","800"]}'>타입3개</option>
		<option data='{"USERCHILDRENGENDER":["200","200","200"],"USERCHILDRENNAME":["김도윤","김태윤","김시윤"],"USERCHILDRENBIRTHDATE":["2009-01-14","2013-06-06","2015-10-06"],"USERCHILDRENKIND":["800","800","800"]}'>타입3개</option>
		<option data='{"USERCHILDRENGENDER":["100","100","100","100","100"],"USERCHILDRENNAME":["윤희로","윤시율","윤조이","윤로이","윤리몬"],"USERCHILDRENBIRTHDATE":["2010-01-20","2012-05-06","2015-04-15","2015-04-15","2016-05-16"],"USERCHILDRENKIND":["800","800","800","800","800"]}'>타입5개</option>
	</select>
  </form>

<table>
	<thead>
	<tr>
		<th></th>
		<th></th>
		<th></th>
		<th></th>
	</tr>
	</thead>
	<tbody>
	
	</tbody>
</table>

<!-- CONFIGFORMNAME > EXPLANATION -->
  1. 제이쿼리를 사용해서 selectbox 에 있는 data 속성을 json->list(array) 형태로 가져와서 EXPLANATION 값을 th 뿌려주기  <br>
  2. 제이쿼리를 사용해서 selectbox 에 option을 선택하면  data 속성을 json->list(array) 형태로 가져와서 유형, 이름,  생년월일,  성별 값을 th 뿌려주기

</body>
</html>


위를 해결했을 시 아래 예시처럼 나와야 한다는데, json이 처음이라 어디서부터 건드려야 할지 모르겠습니다... 제이쿼리 스크립트를 어떻게 써야 하나요?ㅠㅠ




0
  • 답변 3

  • 오후
    1k
    2020-09-21 18:18:37

    jquery 붙어있으니 jquery 기준

    <select id="test-select" >    </select>   
    <table>~~~~~ <tbody id="cont"></tbody></table> 
    
    <!-- 편의상 id 추가 -->
    
    
    
      $(function(){
         $('#test-select').change(function(){
             var dataStr = $('#test-select option:selected').attr('data');
             $('#cont').empty();
           if(dataStr == ''){
              // data 값없음
              $('#cont').html('<tr><td colspan="4">선택값없음</td></tr>');
           }else{
              var jsonParse = JSON.parse(dataStr);
              for(var i = 0; i < jsonParse.USERCHILDRENKIND.length; i++){
                var htmls = '<td>'+ jsonParse.USERCHILDRENKIND[i]+'</td>';
                 htmls += '<td>'+ jsonParse.USERCHILDRENNAME[i]+'</td>';
                 htmls += '<td>'+ jsonParse.USERCHILDRENBIRTHDATE[i]+'</td>';
                 htmls += '<td>'+ jsonParse.USERCHILDRENGENDER[i]+'</td>';
    			$('<tr>').html(htmls).appendTo( $('#cont') );
              }
            }
        });
      });
    
    


  • 웰시코기궁디궁디
    13
    2020-09-22 10:09:47

    선 생 님 감 사 합 니 다 당 신 은 빛

  • 웰시코기궁디궁디
    13
    2020-09-22 10:22:20

    2번은 해결 되었는데 1번은 어떻게 호출시키나요??


    1. 제이쿼리를 사용해서 selectbox 에 있는 data 속성을 json->list(array) 형태로 가져와서 EXPLANATION 값을 th 뿌려주기


    도움주실 분~~ ㅠㅠ

  • 로그인을 하시면 답변 을 등록할 수 있습니다.