2012-03-17 6 views
0

を解析し、フォーマットに従っているAJAX呼び出しによって応答としてファイルを解析し、XMLしようとする:私がすべきと考えているので、繰り返し、横断ノードJavascriptが私はJSのビット初心者だXMLファイル

<chart> 
    <categories> 
     <name>'MSIE'</name> 
     <name>'Firefox'</name> 
     <name>'Chrome'</name> 
     <name>'Safari'</name> 
     <name>'Opera'</name> 
     </categories> 
     <name>'Browser Brands'</name> 
     <data> 
      <series> 
       <y>55.11</y> 
       <drilldown> 
        <name>'MSIE versions'</name> 
        <categories> 
         <name>'MSIE 8.0'</name> 
         <name>'MSIE 6.0'</name> 
         <name>'MSIE 7.0'</name> 
         <name>'MSIE 9.0'</name> 
        </categories> 
       <data> 
        <series> 
         <y>33.06</y> 
         <drilldown> 
          <name>'drilldown next level'</name> 
          <categories> 
           <name>'a'</name> 
           <name>'b'</name> 
           <name>'c'</name> 
          </categories> 
          <data> 
           <point>23</point> 
           <point>54</point> 
           <point>47</point> 
          </data> 
         </drilldown> 
        </series> 
        <point>10.85</point> 
        <point>7.35</point> 
        <point>2.41</point> 
       </data> 
       </drilldown> 
      </series> 
      <series> 
       <y>21.63</y> 
       <drilldown> 
       <name>'Firefox versions'</name> 
       <categories> 
        <name>'Firefox 3.6'</name> 
        <name>'Firefox 4.0'</name> 
        <name>'Firefox 3.5'</name> 
        <name>'Firefox 3.0'</name> 
        <name>'Firefox 2.0'</name> 
       </categories> 
       <data> 
        <point>13.52</point> 
        <point>5.43</point> 
        <point>1.58</point> 
        <point>0.83</point> 
        <point>0.20</point> 
       </data> 
       </drilldown> 
      </series> 
      <series> 
       <y>11.94</y> 
       <drilldown> 
       <name>'Chrome versions'</name> 
       <categories> 
        <name>'Chrome 10.0'</name> 
        <name>'Chrome 11.0'</name> 
        <name>'Chrome 8.0'</name> 
        <name>'Chrome 9.0'</name> 
        <name>'Chrome 12.0'</name> 
        <name>'Chrome 6.0'</name> 
        <name>'Chrome 5.0'</name> 
        <name>'Chrome 7.0'</name> 
       </categories> 
       <data> 
        <point>9.91</point> 
        <point>0.50</point> 
        <point>0.36</point> 
        <point>0.32</point> 
        <point>0.22</point> 
        <point>0.19</point> 
        <point>0.12</point> 
        <point>0.12</point> 
       </data> 
       </drilldown> 
       </series> 
       <series> 
       <y>7.15</y> 
       <drilldown> 
       <name>'Safari versions'</name> 
       <categories> 
        <name>'Safari 5.0'</name> 
        <name>'Safari 4.0'</name> 
        <name>'Safari Win 5.0'</name> 
        <name>'Safari 4.1'</name> 
        <name>'Safari/Maxthon'</name> 
        <name>'Safari 3.1'</name> 
        <name>'Safari 41'</name> 
       </categories> 
       <data> 
        <point>4.55</point> 
        <point>1.42</point> 
        <point>0.23</point> 
        <point>0.21</point> 
        <point>0.20</point> 
        <point>0.19</point> 
        <point>0.14</point> 
       </data> 
      </drilldown> 
      </series> 
      <series> 
       <y>2.14</y> 
       <drilldown> 
       <name>'Opera versions'</name> 
       <categories> 
        <name>'Opera 11.x'</name> 
        <name>'Opera 10.x'</name> 
        <name>'Opera 9.x'</name> 
       </categories> 
       <data> 
        <point>1.65</point> 
        <point>0.37</point> 
        <point>0.12</point> 
       </data> 
       </drilldown> 
      </series> 
     </data> 
</chart> 

次のようになる:

series->drilldown->series->drilldown.... 
drilldown->categories 
drilldown->data 

Traversing path approach to be taken = 
loop 
{ 
      for (mainseries) 
      { 
       get y 
       for(series->drilldown) 
       { 
       get name, categories(names), data(points) 
       for(drilldown->series) 
       { 
         mainseries = currentseries 
       } 
       } 
     } 
} 

私が実装したい、私は何とかトラバースを取得し、ロジックを解析するわけではない初心者だとして:

$.get('ex.xml', function(xml) { 
       var $xml = $(xml); 
       $xml.find('chart categories name').each(function(i, category) { 
         options.xAxis.categories.push($(category).text()); 
       }); 
       chart.setTitle.push($xml.find('chart name').text()); 
       $xml.find('series').each(function(i, series) { 
           var seriesOptions = { 
             y: parseInt($(series).find('y').text()), 
             drilldown : [] 
             }; 
             $xml.find('series drilldown').each(function(i, drilldown) { 
               name : $(drilldown).find('name').text() 
               categories : [], 
               data: [] 
               $xml.find('drilldown categories').each(function(i, categories) { 
                 name : $(categories).find('name').text() 
                 }); 
               $xml.find('drilldown data').each(function(i, data) { 
                 $xml.find('data point').each(function(i, point) { 
                   seriesOptions.drilldown.data.push(parseInt($(point).text())) 
                 }); 
               }); 
             }); 
       }); 
     }); 
01目的をachieveingで私を助けてください

A series will never have values leaf node 
A series is represented as a {..<property : values>..} 
A series will always one drilldown and a drilldown will have one series in itself which goes in repetition 
A series will always have a proerty y or a drilldown 
A drilldown will have name leaf node,categories branch and either a another series or a data branch 
A category branch will always have a name leaf node 
A data branch will always have values leaf node 

:どのように私はそれを注意してください、私はチャートデータを得ることができるように横断し、各リーフ/ブランチノードを訪問することができ

。私はあなたが探している答えの鍵はjQueryの中で$(this)を使用することだと思い事前

答えて

0

感謝。これはeach()関数内の自己参照要素で、各要素に対して$(this)がその要素を参照するようになっています。念頭に置いて

、あなたがして行うことができます:値は、関数クロージャのスコープ内でアクセス可能であるように、私は変数に$(この)の参照を格納しています

var thisElement = $(this); 
thisElement.find("some other selector").each(function(){ 
    var theOtherSelector = $(this); 
    theOtherSelector.find("yet another selector").each(function(){ 
     // and so forth... 
    }; 
}) 

注意を。

・ホープこれはあなたの質問

編集答え:(!構文をチェックされていない)あなたのXMLの再帰の深さ検索のためのサンプルコードを

$xml.find("chart data series").each(function(){ 
    var chartDataSeries = $(this); 
    var seriesDrillDownSearch = function(){ 
     var seriesDrillDownElement = $(this); 

     // do your processing here .. 

     seriesDrillDownElement.find("series drilldown").each(seriesDrillDownSearch); 
    }(); 
} 
+0

しかし、どのように私は再し、ループに行きます - 'chart data series'要素を持つ変数を 'chart data drilldown series'に割り当てて、XMLツリーのすべての 'series'をトラバースできるようにします。注「チャートデータドリルダウンシリーズ」の深さはわかりませんが、「チャートデータシリーズ」からトラバースを開始します。深度は「チャートデータドリルダウンシリーズドリルダウンシリーズ」のようになります。 – Prakash

+0

最初に選択するセレクタは、より具体的なものでなければならないので、直接の子のみを選択できます。 http://api.jquery.com/category/selectors/を参照してください。 次に、この反復的な反復処理を行う関数を定義することができます。私は例 – badunk

+0

のための私のポストを編集しますありがとう、しかし再帰関数から戻るためにストッパーケースは何でしょうか? – Prakash

関連する問題