요즘 부동산 플랫폼을 만들어보고 싶어서 api 사용하는 연습도 할겸

공공데이터 api키를 발급받고 데이터를 뿌려보려고 했었는데 

우연히 그런건지 받는 api가 xml 데이터였다

 

하지만 난 Json과 map()을 사랑하는 사람이라

json변환 방법을 찾았는데

 

언제나 그렇듯 흔하게 나오는 json.parse()로는 문법 오류가 났다

(데이터 구조가 이미 json형식일 경우 아님)

 

찾아보니 라이브러리 혹은 직접 해야하는데 검색하다 라이브러리를 사용하지 않고 쉽게 변환할 수 있는

좋은 코드를 받게 되서 공유한다.

function xmlToJson(xml) {
    // Create the return object
    var obj = {};

    if (xml.nodeType == 1) {
        // element
        // do attributes
        if (xml.attributes.length > 0) {
        obj["@attributes"] = {};
        for (var j = 0; j < xml.attributes.length; j++) {
            var attribute = xml.attributes.item(j);
            obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
        }
        }
    } else if (xml.nodeType == 3) {
        // text
        obj = xml.nodeValue;
    }

    // do children
    // If all text nodes inside, get concatenated text from them.
    var textNodes = [].slice.call(xml.childNodes).filter(function(node) {
        return node.nodeType === 3;
    });
    if (xml.hasChildNodes() && xml.childNodes.length === textNodes.length) {
        obj = [].slice.call(xml.childNodes).reduce(function(text, node) {
        return text + node.nodeValue;
        }, "");
    } else if (xml.hasChildNodes()) {
        for (var i = 0; i < xml.childNodes.length; i++) {
        var item = xml.childNodes.item(i);
        var nodeName = item.nodeName;
        if (typeof obj[nodeName] == "undefined") {
            obj[nodeName] = xmlToJson(item);
        } else {
            if (typeof obj[nodeName].push == "undefined") {
            var old = obj[nodeName];
            obj[nodeName] = [];
            obj[nodeName].push(old);
            }
            obj[nodeName].push(xmlToJson(item));
        }
        }
    }
    return obj;
}

https://velog.io/@duboo/javascript-XML-to-JSON-%EB%B3%80%ED%99%98 출처

 

var lo = '구로구';
var xhr = new XMLHttpRequest();
var xmlDoc;
let xmlParser = new DOMParser();
let list = document.getElementById('list');
xhr.open('GET', url);
// xhr.responseType = 'json'
xhr.onreadystatechange = function () {
    if (this.readyState == xhr.DONE) {  // <== 정상적으로 준비되었을때
        if(xhr.status == 200||xhr.status == 201){ // <== 호출 상태가 정상적일때
            xmlDoc = xmlParser.parseFromString(xhr.response, "text/xml");
            var result = xmlToJson(xmlDoc);
            result.tbLnOpendataRtmsV.row.map(h => {
                if(h.HOUSE_TYPE == "아파트"){
                    console.log(h);
                    $(list).append(`
                    <details>
                        <summary>${h.BLDG_NM}</summary>
                        <ul>
                            <li class="h_attr">거래일자 : ${h.DEAL_YMD}</li>
                            <li class="h_attr">소속지역 : ${h.SGG_NM}</li>
                            <li class="h_attr">소속 동 : ${h.BJDONG_NM}</li>
                            <li class="h_attr">주거형태 : ${h.HOUSE_TYPE}</li>
                            <li class="h_attr">실거래금액 : ${h.OBJ_AMT}</li>
                        </ul>
                    </details>`
                    );
                }
            });
        }
    }
};

현재 테스트용으로 쓰고 있는 코드 (발급받은키) 자리에 서울 공공데이터 api키를 발급받아서 넣으면..!

 

깔끔하게 변환되었다.

 

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

[Javascript] 클립보드 복사하기 navigator.clipboard  (0) 2023.10.30
[Javascript] Swiper-js 클릭한 슬라이드 가운데 정렬하기  (0) 2023.10.19
[Javascript] 부모창에서 iframe 컨텐츠 접근하기  (0) 2023.10.11
[Javascript] iframe에서 부모 변수 가져오기  (0) 2023.10.10
innerHtml로 만든 태그에 이벤트 바인딩하기 [JavaScript & html]  (0) 2023.10.07

+ Recent posts

티스토리툴바