[JS] JSON타입으로 변경 후 테이블 생성하기

송 이 2024. 4. 5. 17:58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            text-align: center;
        }
        table{
            border: 1px solid black;
        }

        th, td{
            border: 1px solid #444444;
        }
        .content{
            width: 800px;
            height: 300px;
        }
        #fileimg{
            width: 100px;
        }
        img{
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr id="thead">
                <td>ADDRESS</td><td>ADMIN_NAME</td><td>CONTENT</td><td>DOJIJUNG_NO</td><td>JIJUNG_DATE</td><td>MYONGCHING</td><td class="fileimg">FILEURL</td>
            </tr>
        </thead>
        <tbody id="tbody">
            
        </tbody>
    </table>

    
    <script>
        /* Javascript 샘플 코드 */

        const tbody = document.getElementById("tbody");
        const thead = document.getElementById("thead");
        
        var xhr = new XMLHttpRequest();
        var url = 'http://apis.data.go.kr/6480000/gyeongnamcultural/gyeongnamculturallist'; /*URL*/
        var queryParams = '?' + encodeURIComponent('serviceKey') + '='+'b8YK7SXLrsC0%2F82KZv4LSbh%2FUxPJVb%2BZxLLV64BfAzLCgI9Mt77BfwDhkjY8AwEiNUfHykomfYkElEPr5K5dDw%3D%3D'; /*Service Key*/
        queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
        queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /**/
        queryParams += '&' + encodeURIComponent('resultType') + '=' + encodeURIComponent('json'); /**/
        xhr.open('GET', url + queryParams);

        xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
                //document.write('Status: '+this.status+'nHeaders: '+JSON.stringify(this.getAllResponseHeaders())+'nBody: '+this.responseText);
                
                //문자열을 자바스크립트 객체로 바꿔보자 -> 문자열의 형태가 자바스크립트 객체 형태(JSON)인가?
                //객체 -> 문자열(JSON.stringify()), 문자열 --> 객체(JSON.parse())
                              
                let objs = JSON.parse(this.responseText);
                console.log(objs);
  
                for(let key in objs){
                    console.log(key); //키
                    console.log(objs[key].body.items.item);
                    console.log(objs[key].body.items.item[0]);
                    console.log(objs[key].body.items.item[0].ADDRESS1); //값

                    let value = objs[key].body.items.item;
                    console.log(value[0]);
                    
                    const list = [];
                    list.push(key);
                    console.log(list);


                    for(let i=0; i<value.length; i++){
                        tbody.innerHTML = tbody.innerHTML+"<tr><td>"+value[i].ADDRESS1+"</td><td>"+value[i].ADMIN_NAME+"</td><td class='content'>"+value[i].CONTENT+"</td><td>"+value[i].DOJIJUNG_NO+"</td></td>"+"</td><td>"+value[i].JIJUNG_DATE+"</td></td>"+"</td><td>"+value[i].MYONGCHING+"</td></td>"+"</td><td id='fileimg'><img src="+value[i].fileurl1+"></td></tr>";
                        
                    }

                    // const list = [];
                    // list = objs[key].body.items.item;
                    // console.log(list);

                    
                }

                    

            }
        };


        xhr.send('');

    </script>
</body>
</html>
저작자표시 (새창열림)