XML Parse JS

프로젝트를 진행하며 xml파일을 반환해주는 공공 api가 있었다. 

xml을 일단 fetch로 받아와 텍스트 형식으로 해석하는 작업부터 시작

        // 파일 가져오기
        const response = await fetch(`url`);
        // 텍스트 형식으로 해석
        const text = await response.text();
        // XML 형식으로 해석
        const xml = new DOMParser().parseFromString(text, 'application/xml');

 

 

해당 작업이 끝나니 내부의 데이터가 xml 이라 형식이 html 에서는 바로 적용할 수 가 없었다. 

<result>
<tcount>37847</tcount>
<pageno>1</pageno>
<res_date>2024-10-04 오후 7:55:08</res_date>
<item>
<rateno>SC-OM-241002-001</rateno>
<rateddate>2024-10-02</rateddate>
<gametitle>전란:호협전</gametitle>
<orgname>게임물관리위원회</orgname>
<entname>HK FOREVER9 TECHNOLOGY CO.,LIMITED</entname>
<summary/>
<givenrate>전체이용가</givenrate>
<genre>롤플레잉</genre>
<platform>모바일 게임</platform>
<descriptors>폭력성</descriptors>
<cancelstatus>False</cancelstatus>
<canceleddate/>
</item>

위와 같은 형식으로 나타나서 이것을 다시 분리해주는 작업이 필요했다.

다행히 받아오는 데이터를 사용자가 지정할 수 있어서 개수를 알 수 있어 반복문을 돌리기 쉬웠다.

let data = [];

for(let i = 0; i < 10; i++) {
    data.push({
        date: xml.getElementsByTagName('item')[i].getElementsByTagName('rateddate')[0].childNodes[0].nodeValue,
        enterName: xml.getElementsByTagName('item')[i].getElementsByTagName('entname')[0].childNodes[0].nodeValue,
        genre: xml.getElementsByTagName('item')[i].getElementsByTagName('genre')[0].childNodes[0].nodeValue,
        givenrate: xml.getElementsByTagName('item')[i].getElementsByTagName('givenrate')[0].childNodes[0].nodeValue,
        gametitle: xml.getElementsByTagName('item')[i].getElementsByTagName('gametitle')[0].childNodes[0].nodeValue,
        platform: xml.getElementsByTagName('item')[i].getElementsByTagName('platform')[0].childNodes[0].nodeValue,
    })
}

위와같은 방식으로 데이터를 객체 배열로 변환시켜 다시 페이지에 innerHTML로 html에 던져주는 작업으로 진행했다.

처음에 getElementsByTagName()에서 오류가 발생하였는데 알고보니 xml[0]으로 받아와서 발생한 오류였다. 

파일을 이래서 긁어오면 안돼...