IT 조각 모음: javascript

2014년 9월 11일 목요일

[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>

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

2014년 6월 16일 월요일

[JavaScript] this 의 용법

this 키워드는 JavaScript 코드를 가지고 있는 객체를 지칭한다.

function에서 사용 되는 경우 그 function 을 가지고 있는 객체를 지칭하고 객체에서 사용하면 객체 자체를 가르킨다.

<script>

function Person (name, age) {
    this.name = name;
    this.age = age;

    this.sayHello = function () {
          var name = "Person";
          return this.name +  " : Hello " + name + ".";
    }
}

var smith = new Person("smith", 37);console.log (smith.sayHello ()); // smith : Hello Person.

</script>

위의 예제에서 출력 결과는 "smith : Hello Person.”이다.

Person 바로 아래에 있는 this 는 현재 코드를 소유한 객체(smith)를 지칭하게 되고 sayHello 아래에서 this 는 function 소유한 객체를 가키게 된다. 즉, smith 이다.

따라서 sayHello 함수에서의 this는 함수 자신이 아닌 smith이다. 그래서 this.name은 “smith” 가 되고 name은 함수 내부의 변수 “Person”을 가르키게 된다.

이와 비슷한 형태로 혼동하기 쉬운 상황이 있다.

<script>

function civil() {

var name = "Neo";

function sayMyName() {

console.log ("name : " + name); // name : Neo

console.log ("this.name : " + this.name); // this.name :

}

sayMyName();

}

civil();

</script>

이와 같은 경우는 function 에서 사용되는 경우이다.

현재 civil() 을 실행 시키는 주체 window 이므로 코드를 소유한 객체는 window 가 된다 따라서 this 키워드는 window 객체를 가르 키게 된다.

따라서 이 경우 this.name 은 내용이 없어서 안찍게 된다.

실제로 civil(); 을 window.civil(); 로 해도 동일하게 동작하게 된다.

참조 : http://www.w3schools.com/js/js_object_definition.asp