공공API-코로나현황

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>corona api</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <h1>코로나 발생 현황</h1>
        <form class="form-inline mb-2">
            <input type="date" id="startDate" class="form-control">
            ~
            <input type="date" id="endDate" class="form-control">
            <button class="btn-view btn btn-primary ml-2">보기</button>
        </form>
        <table class="table" id="corona-table">
            <thead class="thead-dark">
                <th>날짜</th>
                <th>시간</th>
                <th>확진자</th>
                <th>치료중</th>
                <th>사망</th>
                <th>해제</th>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script>
        var url = 'http://openapi.data.go.kr/openapi/service/rest/Covid19/getCovid19InfStateJson'; /*URL*/
        var queryParams = '?' + encodeURIComponent('ServiceKey') + '='+'서비스키'; /*Service Key*/
        queryParams += '&' + encodeURIComponent('ServiceKey') + '=' + encodeURIComponent('서비스키'); /**/
        queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
        queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('100'); /**/


        // fetch(url + queryParams)
        // .then( res => res.text() )
        // .then( xml => (new window.DOMParser()).parseFromString(xml, 'text/xml') )
        // .then( data => console.log(data) )

        let corona_data = []; //전역(global) 변수

        const getCoronaData = async () => {
            let corona_url = url + queryParams;
            //let startDate = "20201001";
            //let endDate = "20201020";
            let startDate = $("#startDate").val();
            let endDate = $("#endDate").val();
            startDate = startDate.replace(/-/g,'');
            endDate = endDate.replace(/-/g,'');
            corona_url += '&' + encodeURIComponent('startCreateDt') + '=' + encodeURIComponent(startDate);
            corona_url += '&' + encodeURIComponent('endCreateDt') + '=' + encodeURIComponent(endDate);
            let response = await fetch(corona_url);
            let txt = await response.text();
            let xml = await (new window.DOMParser()).parseFromString(txt, 'text/xml');
            //console.log(xml);
            corona_data = await xml2json(xml);
            listData(corona_data.items);
        }

        const listData = (data) => {
            console.log(data);
            $("#corona-table tbody").html("");
            for(let i=0; i<data.length; i++) {
                let tr = `
                    <tr>
                        <td>${data[i].date}</td>
                        <td>${data[i].time}</td>
                        <td>${data[i].case}</td>
                        <td>${data[i].care}</td>
                        <td>${data[i].death}</td>
                        <td>${data[i].clear}</td>
                    </tr>
                `;
                $("#corona-table tbody").prepend(tr);
            }
        }

        const xml2json = (xml) => {
            let data = {};
            let body = $(xml).find("body")[0];
            data.total = $(body).find("totalCount")[0].innerHTML;
            data.page = $(body).find("pageNo")[0].innerHTML;
            let items = $(body).find("item");
            data.items = [];
            for( let i=0; i<items.length; i++) {
                let item = {};
                item.date = $(items[i]).find("stateDt").text();
                item.time = $(items[i]).find("stateTime").text();
                item.case = $(items[i]).find("decideCnt").text();
                item.clear = $(items[i]).find("clearCnt").text();
                item.death = $(items[i]).find("deathCnt").text();
                item.care = $(items[i]).find("careCnt").text();
                data.items.push(item);
            }
            return data;
        }

        const init = () => {
            let today = new Date();
            let yy = today.getFullYear();
            let mm = today.getMonth() + 1;
            let dd = today.getDate();
            if( mm < 10 ) mm = "0" + mm;
            if( dd < 10 ) dd = "0" + dd;
            let startDate = yy + "-" + mm + "-" + dd;
            $("#startDate").val(startDate);
            $("#endDate").val(startDate);
            getCoronaData();
        }

        $(".btn-view").on("click", function(event){
            event.preventDefault();
            getCoronaData();
        });

        init();


    </script>
</body>
</html>