[JavaScript] jQuery - XML 파일, 특정 노드값으로 다른 노드값 찾는법

제목이 무슨 말인지 좀 헷갈릴 수 있는데, 간단하게 예시를 들어 설명하겠다.

CORPCODE.xml

<?xml version="1.0" encoding="UTF-8"?>
<result>
    <list>
        <corp_code>00126380</corp_code>
        <corp_name>삼성전자</corp_name>
        <stock_code>005930</stock_code>
        <modify_date>20210610</modify_date>
    </list>
</result>

이 코드는 open DART에서 제공하는 xml 파일 내용 중 삼성전자가 담긴 list만을 뽑은 코드다. 원본에는 수많은 국내 기업들의 고유번호, 회사명, 종목코드 등이 담겨있다.

 

하려는 작업은 이런 것이다. 나는 삼성전자의 기업명은 알고 있는데 삼성전자의 고유번호인 00126380은 알 길이 없다. 그렇다면 '삼성전자'를 입력해서 '00126380'라는 값을 찾아낼 수는 없을까?

 

잘은 모르겠지만 몇 가지 방법이 있을 거 같긴 하다. 단, xml 파일을 수정하는 방법은 사용할 수 없다. 원본 파일은 저렇게 생긴 코드가 50만 줄 넘게 있기 때문이다.

---

하려는 작업을 조금 프로그래밍스럽게 바꿔 말하면 이렇다. 클라이언트(브라우저)에서 '삼성전자'라는 값을 입력하면(submit 또는 click 등), xml 파일에서 corp_name의 노드 값이 '삼성전자'인 list를 찾고, 해당 list 안에 있는 corp_code의 노드 값 '00126380'을 가져와야 한다.

 

jQuery를 사용한다. 사용하는 xml 파일은 같은 프로젝트 폴더 경로에 넣어둔다. url: "./CORPCODE.xml"로 접근할 수 있도록.

var corp_code = "";
var myXML;
        $(function() {
            $("#search").click(function() {
                var Value = $("#searchBar").val() // "삼성전자"

                $.ajax({
                    url: "./CORPCODE.xml",                        
                    type: "get",
                    success: function(xml) {
                        myXML = $(xml).find("list").filter(function() {
                            return $(this).find('corp_name').text() == Value;
                        });
                        console.log(myXML);
                        corp_code = myXML[0].childNodes[1].innerHTML;
                        console.log(corp_code); // "00126380"
                    })

전역변수로 corp_code와 myXML을 선언해준다. 변수를 다른 함수에서도 사용하기 위해서다.

 

#search는 button 태그, #searchBar는 input 태그의 id다. 즉 브라우저에서 검색 창에 값을 입력하고 검색 버튼을 누르는 이벤트가 발생하면 function이 작동한다. $("#searchBar").val()를 통해 사용자가 입력한 값을 Value에 저장한다.

 

success 부분이 핵심이다. myXML에 corp_name 노드 값이 사용자가 입력한 값(Value)과 같은 list를 찾아 저장한다. myXML 콘솔 로그를 찍어보면 데이터 형태가 나온다. 거기서 최종적으로 원하는 값의 경로를 확인하면 된다. 위 사례의 경우 myXML[0].childNodes[1].innerHTML 경로에서 찾을 수 있었다. 참고로 데이터 형태가 졸라 복잡해서 쫄 수 있는데, 그럴 필요 없이 원하는 값만 찾아내면 된다. F12 개발자 도구 → Console에서 찾아준다. 찾았으면 우클릭 → Copy property path 클릭하면 정확한 경로가 복사된다.

 

corp_name 값으로 corp_code 값을 뽑아냈다. 이제 corp_name만 알아도 corp_code를 사용할 수 있다.

활용?

사실 jQuery xml 파싱 관련해서는 검색을 해봐도 노드명을 통해 노드 값을 가져오는 단편적인 내용이 대부분이라 이 포스팅에서 소개한 방법을 찾기가 힘들었다. 역시 갓텍오버플로우가 답이다. 힘들게 비슷한 질문을 찾아냈고 조금 변형했더니 구현할 수 있었다.

 

그래서, 이 기능이 왜 필요한지 살짝 언급하고 마치겠다. 그냥 개인적으로 프로젝트 중에 필요했다..ㅎ 전자공시시스템의 오픈 API를 통해 JSON으로 기업 정보를 받아오고 있는데 JSON의 요청 인자가 기업고유번호였다. 그러니까 나는 '삼성전자'로 검색해서 기업정보를 출력하고 싶은데 00126380로 요청해야 하는 것이다. 근데 누가 이렇게 검색하냐고.. 애초에 요청 인자로 고유번호, 기업명 둘 다 가능하도록 만들면 편할 거 같은데. 흠

 

결론: xml 파일에서 특정 노드 값으로 같은 노드에 묶인 다른 노드 값을 가져올 수 있다.