XMLデータをJavaScriptのオブジェクトに変換する方法

フロントエンド開発では、サーバーとのデータ対話が頻繁に発生します。サーバーから返されるデータは、多くの場合 XML 形式で送信されます。したがって、フロントエンド開発者にとって、XML データをオブジェクトに変換するスキルを習得することは非常に重要です。

この記事では、JavaScript を使用して XML データをオブジェクトに変換する方法を紹介します。XML データを処理する際のフロントエンド開発者に役立つことを願っています。

1. XML 形式のデータ

XML (Extensible Markup Language) は、一般的に使用されるデータ交換形式であり、可読性と拡張性が優れているため、Web で広く使用されています。アプリケーションで広く使用されています。以下は単純な XML ファイルの例です。

<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <name>JavaScript高级程序设计</name>
    <author>Nicholas C. Zakas</author>
    <price>¥89.90</price>
  </book>
  <book>
    <name>JavaScript权威指南</name>
    <author>David Flanagan</author>
    <price>¥99.00</price>
  </book>
</books>

上記の XML ファイルには 2 冊の書籍に関する情報が含まれており、各書籍にはタイトル、著者、価格が含まれています。

2. XML をオブジェクトに変換する基本手順

XML をオブジェクトに変換する基本手順は次のとおりです:

1. XML データの取得
2. XML データの分析
3. 解析されたオブジェクトを JavaScript オブジェクトに保存します

以下では、これらの手順を段階的に実装する方法を紹介します。

3. XML データの取得

この例では、jQuery の ajax メソッドを使用して XML データを取得します。コードは次のとおりです。

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        console.log(xml);
    }
});

上記のコードでは、$.ajax メソッドを使用して XML データを取得します。このメソッドでは、いくつかのオプションを含む JavaScript オブジェクトを渡す必要があります。このうち、type属性はリクエストの種類(ここではGET)を指定し、url属性はリクエストのURLアドレスを指定し、dataType属性はリクエストのデータ型を指定します。

リクエストが成功すると、success 関数が呼び出され、XML データを含む JavaScript オブジェクトが渡されます。この関数では、console.log メソッドを使用して XML データをコンソールに出力します。

4. XML データの解析

XML データを取得したら、それを解析する必要があります。 jQuery では、$.parseXML メソッドを使用して XML データを解析できます。このメソッドはパラメータとして文字列を受け取り、新しい XML ドキュメント オブジェクトを返します。コードは次のとおりです。

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc);
    }
});

上記のコードでは、まず、取得した XML データをパラメータとして $.parseXML メソッドに渡し、新しい XML ドキュメント オブジェクトを取得します。次に、ドキュメント オブジェクトを jQuery オブジェクトに変換します。この操作は主に、jQuery メソッドを使用して XML データを操作しやすくすることを目的としています。

5. 解析したオブジェクトを JavaScript オブジェクトに保存します

最後に、解析したオブジェクトを JavaScript オブジェクトに保存します。ここでは、各書籍に関する情報を格納する書籍配列を定義します。コードは次のとおりです。

$.ajax({
    type: "GET",
    url: "books.xml",
    dataType: "xml",
    success: function(xml) {
        var xmlDoc = $.parseXML(xml),
            $xml = $(xmlDoc),
            books = [];

        $xml.find("book").each(function() {
            var book = {
                name: $(this).find("name").text(),
                author: $(this).find("author").text(),
                price: $(this).find("price").text()
            };
            books.push(book);
        });
        console.log(books);
    }
});

上記のコードでは、$xml.find メソッドを使用して XML 内の各書籍を検索し、.each メソッドを使用して各書籍を反復処理します。各書籍のループ内で、jQuery の .find メソッドを使用してタイトル、著者、価格を取得し、書籍オブジェクトに保存します。最後に、この book オブジェクトを Books 配列に追加します。

books 配列を取得したら、それを使用してデータを表示したり、後続の操作を実行したりできます。

概要

この記事では、JavaScript を使用して XML データをオブジェクトに変換する方法を紹介します。フロントエンド ページは表示や操作のためにサーバーから XML データを取得する必要があることが多いため、このスキルはフロントエンド開発者にとって非常に重要です。

実際の開発では、複雑な XML データ構造に遭遇したり、XML データをより複雑な JavaScript オブジェクトに変換する必要が生じたりすることがあります。現時点では、XML データの構造をより詳細に分析し、より高度な技術を使用してこれらの操作を完了する必要があります。

以上がXMLデータをJavaScriptのオブジェクトに変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。