-1

データを含む XML ファイルがあり、DIV タグなどの内部に同じ日付を持つアイテムを配置したいと考えています。

私が欲しいのは、エディションを日付で分類し、同じ日付値を持つすべてのアイテム/エディションをバンドルすることです。

これは可能ですか？

XML コード:

<edition>
    <id>116853</id>
    <name>First Round - Summervibes Edition</name>
    <date>08-06-2012</date>
    <time>19:30</time>
    <location>
        Prins Alexanderlaan 37, Rotterdam, The Netherlands
    </location>
    <venue url="http://www.betribes.com/venues/club-eclipse" id="24079">Club Eclipse</venue>
    <lineup>Kleine Viezerik, Kid Kaio, DJ Goine</lineup>
    <entrance_fee>€11,–&lt;/entrance_fee>
    <music>Club House, House, R&B</music>
    <hot_party>false</hot_party>
    <website_link>http://club-eclipse.nl</website_link>
    <clubjudge_link depricated="true">
        http://www.betribes.com/editions/first-round-summervibes-edition
    </clubjudge_link>
    <edition_link>
        http://www.betribes.com/editions/first-round-summervibes-edition
    </edition_link>
    <image_flyer_front>
        http://s3-eu-west-1.amazonaws.com/btrb-prd-flyers/ye29ys93be98.jpg
    </image_flyer_front>
    <image_120x120>
        http://s3-eu-west-1.amazonaws.com/btrb-prd-flyers/ye29ys93be98-a_thumbnail-120x120.jpg
    </image_120x120>
    <excerpt/>
    <tickets>
        <ticket>
            <price>11.0</price>
            <name>Ticketscript</name>
            <url>
                https://shop.ticketscript.com/channel/web2/start-order/rid/DFEG5RE7/language/nl
            </url>
        </ticket>
    </tickets>
</edition>
4

1 に答える 1

0

上記の私のコメントを参照してください。あなたがやろうとしていることを正しく解釈したとしたら、それは XML の構文解析の問題だと思います。この回答は、それを行う方法に役立ちます: XML parsing of a variable string in JavaScript。

それを解析したら、編集要素の配列をループして、日付属性が指定したものを探し、必要な属性の値をテーブルのセルなどに出力できる関数を作成する必要があります。行。

質問の書き直しの提案

私はあなたの質問を編集しましたが、誰かがそれを見る前に仲間のフィードバックを待たなければなりません. これが私がそれを書く方法です：

edition という要素の複数のコピーを含む XML ドキュメントがあります。ドキュメントを JavaScript が理解できる形式に解析し、すべてのエディション要素をループして日付別にグループ化したいと考えています。

どうやってそれをしますか？

次に、エディション要素のサンプルを示します (いくつかのサンプル属性のみを使用します。実際のデータはより複雑です)。

<edition>
    <id>116853</id>
    <name>First Round - Summervibes Edition</name>
    <date>08-06-2012</date>
</edition>

既存の回答へのリンク

質問を編集すると、はるかに読みやすくなります。問題は、非常に良い質問が既にあるため、まだ反対票を投じられる可能性があることです.これはあなたの質問と本当に同じだと思います.

とにかく、上記でリンクした質問のアドバイスに基づいて一般的な形を与えるコードを次に示します。さらに一歩進んで、エディションのコレクションをループする方法を示します。

body に div 要素を配置して、データを表示します。

<div id="display"></div>

次に、その下にスクリプト要素を次のようなコードで配置します。

var xmlData = "<editions><edition><id>111</id><name>First</name><date>08-06-2012</date></edition>" +
    "<edition><id>222</id><name>Second</name><date>06-04-2012</date></edition>" +
    "<edition><id>333</id><name>Third</name><date>08-06-2012</date></edition>" +
    "<edition><id>333</id><name>Fourth</name><date>06-04-2012</date></edition></editions>",
    parseXml, xml, editions, display, i, edition, nameElement, name;
if (typeof window.DOMParser != "undefined") {
    parseXml = function(xmlStr) {
        return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
    };
} else if (typeof window.ActiveXObject != "undefined" &&
    new window.ActiveXObject("Microsoft.XMLDOM")) {
    parseXml = function(xmlStr) {
        var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(xmlStr);
        return xmlDoc;
    };
} else {
    throw new Error("No XML parser found");
}
xml = parseXml(xmlData);
editions = xml.getElementsByTagName("edition");

display = document.getElementById("display");
for(var i = 0; i < editions.length; i++){
    edition = editions.item(i);
    nameElement = edition.getElementsByTagName("name");
    name = nameElement[0].childNodes[0];
    div = document.createElement("div");
    div.innerHTML = name.nodeValue;
    display.appendChild(div);
}

2. 次のステップ

そこから、希望するグループ化を実現できることを願っています。すべてのエディションをループして、おそらく日付をキーとして使用して、グループの連想配列を作成する必要があります。あなたが新しい版を打つとき、あなたは

  1. 日付を取得する
  2. その日付のグループを見つけて、そのグループのエディションの配列にエディションを追加しようとします。
  3. グループが存在しない場合は、日付をキーとして新しいグループを作成し、そのグループ内のエディションの配列にエディションを追加します。
  4. 最後にグループ オブジェクトを調べて、各グループを新しい div に表示し、エディションを ul 要素などに表示します

このプロセスを最適化してアイテムを表示するための賢い方法があるかもしれませんが、YUI ライブラリのブログで要素の描画に時間がかかることを見てきました。divand ulandli要素を作成し、最後にペイントします。JavaScript の処理は、新しい要素を DOM に描画する場合に比べて非常に高速になる傾向があります。

3. 最後のアドバイス

  1. 関連するコードのみを提供することが重要だと思います。あなたの例は非常に長く、無関係な詳細でいっぱいです。
  2. 個人的には、XML を構文解析して、結果として得られる XML ドキュメントをナビゲートしようとするのは、まったく悲惨なことだと思います。選択肢がある場合は、JSONをご覧ください。ほとんどの場合、JSON はおそらく XML よりも優れています。これは JavaScript のサブセットであるため、既に JavaScript が理解できる形式になっています (ただし、多くの場合、依然としてパーサーが必要です)。
于 2012-06-09T15:47:27.147 に答える