web-dev-qa-db-ja.com

jQueryを使用してXMLを解析する方法は？

XMLを解析する方法、およびjQueryを使用して結果をナビゲートするにはどうすればよいですか？これが私のサンプルXMLです。

<Pages>
  <Page Name="test">
    <controls>
      <test>this is a test.</test>
    </controls>
  </Page>
  <Page Name = "User">
    <controls>
      <name>Sunil</name>
    </controls>
  </Page>
</Pages>

このパスでノードを見つけたいPages-> Page Name-> controls-> test？

javascriptjqueryxml
37
SRA

そこには $.parseXMLこのための関数： http://api.jquery.com/jQuery.parseXML/

次のように使用できます。

var xml = $.parseXML(yourfile.xml),
  $xml = $( xml ),
  $test = $xml.find('test');

console.log($test.text());

オブジェクトが本当に必要な場合は、そのためのプラグインが必要です。たとえば、このプラグインは、XMLをJSONに変換します。 http://www.fyneworks.com/jquery/xml-to-json/

40
Luwe

.parseXML を使用できます

var xml='<Pages>
          <Page Name="test">
           <controls>
              <test>this is a test.</test>
           </controls>  
          </Page>
          <page Name = "User">
           <controls>
             <name>Sunil</name>
           </controls>
          </page>
        </Pages>';

jquery

    xmlDoc = $.parseXML( xml ),
    $xml = $( xmlDoc );
    $($xml).each(function(){
       alert($(this).find("Page[Name]>controls>name").text());
     });

ここにフィドルがあります http://jsfiddle.net/R37mC/1/

17
Rafay

外部ファイルからXMLを読み込んでいると思います。 $.ajax() を使用すると、実際には非常に簡単です。

$.ajax({
    url: 'xmlfile.xml',
    dataType: 'xml',
    success: function(data){
        // Extract relevant data from XML
        var xml_node = $('Pages',data);
        console.log( xml_node.find('Page[Name="test"] > controls > test').text() );
    },
    error: function(data){
        console.log('Error loading XML data');
    }
});

また、XMLノードの命名について一貫性を保つ必要があります。小文字と大文字の両方のノード名（<Page> 対 <page>）XMLツリーセレクタを使用しようとすると混乱する可能性があります。

12
Jens Roland
$xml = $( $.parseXML( xml ) );

$xml.find("<<your_xml_tag_name>>").each(function(index,elem){
    // elem = found XML element
});
9
Vicky

JQueryの .parseXML()をご覧ください[ドキュメント] ：

var $xml = $(jQuery.parseXML(xml));

var $test = $xml.find('Page[Name="test"] > controls > test');
2
Felix Kling

私はjQueryの .parseXML() の方法を試しましたが、_'Page[Name="test"] > controls > test'_のXMLパス構文が機能しないことがわかりました（誰かが叫んでください！）。

代わりに、個々の.find()の結果を次のように連結しました：

_$xmlDoc.find('Page[Name="test"]')
       .find('contols')
       .find('test')
_

結果は、ワンショットが期待するものと同じものを達成します。

1
mbarnettjones

Googleの結果に最初に表示されるもの http://think2loud.com/224-reading-xml-with-jquery/ xml構造にアクセスする簡単な方法はありません（説明したようにPages-> pagename-> controls-> test）プラグインなしのjQuery.

0
WTK