JavaScriptでXMLを読み込み-Idea to Code-

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

JavaScript

JavaScriptでXMLを読み込み2015/07/26

JavaScriptでXMLを読み込んでみた。

loadXml.jsでdata.xmlを読み込む。

読み込まれたデータはtest.jsのcreate関数に渡されページに反映される。

※要jQuery

【読み込み結果】

loadXml.js

$(function(){
  $.ajax({
    url:'data.xml',
    type:'GET',
    dataType:'xml',
    timeout:1000,
    error:function() {
      alert("ロード失敗");
    },
    success:function(xml){
      create(xml);
    }
  });
});

test.js

function create(xml){
  $(xml).find("char").each(function(){                        // char要素ごとに
    var name = $(this).find("name").text();                    // nameタグの値取得
    var color = $(this).find("color").text();                  // colorタグの値取得
    $("#field").append("<p>" + name + "：" + color + "</p>");    // fieldにpタグとして追加
  });
}

data.xml

<?xml version="1.0" encoding="UTF-8" ?>
<root>
  <char>
    <name>クワイ</name>
    <color>緑</color>
  </char>
  <char>
    <name>オビ</name>
    <color>青</color>
  </char>
  <char>
    <name>モール</name>
    <color>赤</color>
  </char>
</root>