웹개발 교육/Ajax

[45일] Ajax (3) - json 데이터 받아오기 2

ewok 2022. 9. 29. 12:09

sungjuks.json

[
    {"name":"John", "id":"itwill", "kor":70, "eng":80, "mat":90},
    {"name":"Tom", "id":"user1", "kor":75, "eng":80, "mat":95},
    {"name":"Michael", "id":"python", "kor":60, "eng":40, "mat":30}
]

이번에는 3개씩 가져오는 것을 해보자

 

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>05_성적목록보여주기.html</title>
        <script src="jquery-3.6.1.min.js"></script>
    </head>  
    <body>

        <button>* JSON 데이터 받아오기 *</button>
        <div id="panel"></div>

        <script>
            $("button").click(function(){
                $.ajax("sungjuks.json",{
                    dataType:"json"
                    ,error:function(error){
                        alert("ERROR!!" + error);
                    }//error end
                    ,success:function(result){
                        // alert(result);
                        let str = "<table border='1'>";
                        $.each(result, function(idx, data){
                            // alert(idx);  //요소 순서
                            // alert(data); //각 배열 요소값
                            str += "<tr>";
                            str += "    <td>" + data.name + "</td>";
                            str += "    <td>" + data.id + "</td>";
                            str += "    <td>" + data.kor + "</td>";
                            str += "    <td>" + data.eng + "</td>";
                            str += "    <td>" + data.mat + "</td>";
                            str += "</tr>";
                        });//each() end
                        str += "</table>";
                        $("#panel").append(str);
                    }//sucess end
                });//ajax() end
            });//click end
        </script>
        
    </body>
</html>

each 반복문은 result에서 요소 하나를 꺼내서 fucntion을 실행하는 것을 반복한다.