[JavaScript] Ajex 에서 JSON데이터 출력

AJAX

-> jQuery에서 비동기 처리를 담당하는 메서드
실시간 반영 
ex ) 아이디 중복검사, 네이버지도, ... 

JSON 데이터와 함께 활용됨 
기상관측데이터 -> 프로그램 
미세먼지데이터 -> 모듈 

JSON

JSON은 JavaScript Object Notation의 약자입니다.

JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준입니다.

 

이러한 JSON은 XML의 대안으로서 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 고안되었습니다.

또한, JSON은 텍스트 기반이므로 어떠한 프로그래밍 언어에서도 JSON 데이터를 읽고 사용할 수 있습니다

---

예제 1) JSON 데이터를 HTML 테이블에 넣어서 출력하기 

JSON

[  
    {"name": "홍길동", "score1": 95, "score2": 90, "score3": 80, "score4": 85}, 
    {"name": "홍길순", "score1": 80, "score2": 75, "score3": 60, "score4": 75}, 
    {"name": "아무무", "score1": 81, "score2": 71, "score3": 61, "score4": 75}    
]

HTML

<table>
   <caption>학생들의 시험점수</caption>
   <thead>
      <tr>
         <th>이름</th>
         <th>시험1</th>
         <th>시험2</th>
         <th>시험3</th>
         <th>시험4</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>

CSS

style type="text/css">
table {
	width: 100%;
	border: 1px solid black;
}

th, td {
	border: 1px solid black;
	text-align: center;
}
</style>

JS

<script type="text/javascript">
// jQuery 라이브러리가 가진,
// 비동기처리를 담당하는(실시간으로 데이터를 로드하는) 메서드
   $.ajax({
      type: "GET",
      url: "data.json",
      dataType: "json",
      success: function(data){ // data는 data.json의 전체데이터를 의미
         console.log("성공!");
         var elem="";
         
         $.each(data,function(index,obj){ //obj는 json파일에 저장된 개별 객체를 의미 - 객체의 key값과 obj를 같이 가져와야함. 
        	elem+="<tr>";
        	elem+="<td>"+obj.name+"</td>";
        	elem+="<td>"+obj.score1+"</td>";
        	elem+="<td>"+obj.score2+"</td>";
        	elem+="<td>"+obj.score3+"</td>";
        	elem+="<td>"+obj.score4+"</td>";
        	elem+="</tr>";
         }); // jQuery에 존재하는 매세드 너가 가져온 갯수만큼 function 수행해줘 
         
         $("table tbody").append(elem);
      },
      error: function(error){
         console.log(error.status);
         console.log(error.errorText);
      }
   });

</script>

실행 시 하기와 같이 JSON 데이터가 올바르게 들어가 있다. 

---

예제 2) JSON 데이터로 이미지와 경로 연결 

JSON

[
	{"name":"수달블로그", "imgName":"1.jpg","link":"https://developer-sudal.tistory.com/"},
	{"name":"네이버", "imgName":"2.jpg","link":"https://www.naver.com/"},
	{"name":"유튜브", "imgName":"3.jpg","link":"https://www.youtube.com/"}
]

HTML 

<div id="wrapper">
   <h1>ajax() 메서드 실습</h1>
   <div id="img">
   </div>
</div>

JS 

script type="text/javascript">

$.ajax({
   type: "GET",
   url: "imgData.json",
   dataType: "json",
   success: function(data){ 
      var elem="";
      
      $.each(data,function(index,obj){ 
         elem+= "<h2>"+obj.name+"</h2>";
         elem+= "<a href='"+obj.link+"'><img alt='"+obj.name+"' src='images/"+obj.imgName+"'></a>";
      });
      
      $("#img").append(elem); // id가 img이기 때문에 #img 
   },
   error: function(error){
      console.log(error.status);
      console.log(error.errorText);
   }
});
</script>

이미지 클릭 시 연결한 링크로 이동이 가능하다.