[javascript] jQuery에서 XML 파싱 하는 방법

jQuery 에서 xml 파싱하는 방법

<script>
function doSomething ( xmlData) {

    this.itemList = new Array();

    var xmlDoc = $.parseXML(xmlData);
    var $xml = $(xmlDoc);

    $xml.find('item').each(function (idx) {
        var item = new item(idx, $(this));
        this.itemList.push(item);
    });

    // 여기에서 파싱해서 만든 객체로 원하는 처리를 하면 됩니다.
}


var Item = function($xmlData) {
    var myItem = this;
    this.id = $xmlData.attr('id');
    this.type = $xmlData.attr('type');

    return myItem;
};

var xmlData = "<?xml version='1.0' encoding='UTF-8'?> " +
     "<Item id=‘id1’ type=‘triangle’>" +
     "</Item>" +
     "<Item id=‘id2’ type=‘square’>" +
     "</Item>" +
     "<Item id=‘id3’ type=‘circle’>" +
     "</Item>";
</script>

일반적으로 위와 같이 find 로 해서 each 로 사용하면 됩니다.
하지만 아래와 같이 item 엘리멘트가 상위와 하위에 중첩이 되어 있는 경우는
위 와 같은 방법은 문제가 생기게 됩니다.
find로 찾으면 상위에 있는것과 하위에 있는것을 모두 찾아 주기 때문에 다음과 같은 방법을 이용 하면 됩니다.

<script>
function doSomething ( xmlData) {

    this.itemList = new Array();
    this.groupList = new Array();

    var xmlDoc = $.parseXML(xmlData);
    var $xml = $(xmlDoc);

    $xmlData.children().each(function(idx1) {
        var eName = $(this)[0].tagName;

        if (eName == "Item) {
            var item = new Item($(this));
            this.itemList.push(item);
        } else if (eName == "Group") {
            var group = new Group($(this));
            this.groupList.push(group);
        }
    });


    // 여기에서 파싱해서 만든 객체로 원하는 처리를 하면 됩니다.
}


var Item = function($xmlData) {
    var myItem = this;

    this.itemList = new Array();
    this.groupList = new Array();

    this.id = $xmlData.attr('id');
    this.type = $xmlData.attr('type');


    $xmlData.children().each(function(idx1) {
     var eName = $(this)[0].tagName;

     if (eName == "Item) {
     var item = new Item($(this));
     this.itemList.push(item);
     } else if (eName == "Group") {
     var group = new Group($(this));
     this.groupList.push(group);
    }
  });

    return myItem;
};

var Group = function($xmlData) {
    var myGroup = this;
   
    this.itemList = new Array();
    this.groupList = new Array();

    $xmlData.children().each(function(idx1) {
        var eName = $(this)[0].tagName;
    
        if (eName == "Item) {
            var item = new Item($(this));
            myGroup.itemList.push(item);
        } else if (eName == "Group") {
            var group = new Group($(this));
            myGroup.groupList.push(group);
        }
    });

    return myGroup;
};

var xmlData = "<?xml version='1.0' encoding='UTF-8'?> " +
  "<Item id='id1' type='triangle'>" +
  "    <Group>" +
  "        <Item id='id1_sub1' type='triangle_sub'>" +
  "        </Item>" +
  "        <Item id='id1_sub2' type='triangle_sub'>" +
  "        </Item>" +
  "    </Group>" +
  "</Item>" +
  "<Item id='id2' type='square'>" +
  "</Item>" +
  "<Item id='id3' type='circle'>" +
  "</Item>";

</script>

** 더 좋은 방법이 있으면 조언 부탁드립니다.