JavaScriptを使ってループするオブジェクトでWebページを更新する

Question

私はプログラミング言語に関して今までにない不満を感じています。 いくつかのxmlを読んでから、ウェブページに表示しようとしています。私はそれをしても問題ありません。 これを達成する方法のコードは次のとおりです。私は2つの異なる2つのXMLファイルを読んでいるので、

    // File: readXML.js 

         var shared  = []; 
         var sheet  = new Array() 
         // Start function when DOM has completely loaded 
         $(document).ready(function(){ 
          var bigo  = new Object(); 
          console.log("can you see me."); 

          var sheetJoint = new Object(); 


          // get the sheet xml file 
          $.get("sheet1.xml",{},function(xml){ 
           var attrs = []; 

           // this is a loop within a loop. we traverse the values in the xml to get end up with a key pair value of key: val 
          // in our case this works out to be A1 = 0 this is the first step to get the actual value from the sharedstring.xml 
          // Run the function for each row tag in the XML file 
          $(xml).find("row").each(function(i) { 
           //run the function for each c tag in the xml and get the attribute. 
           //this is the attribute that references the actual column. 
           $(this).find("c").each(function(i){ 
            $('c',xml).each(function(i) { 
              v1 = $(this).attr("r"); 
             bigo[v1] =v1; 
              bigo[v1]= $(this).find("v").text(); 
           }); 
         })}); 

          //get the shared string elements to combine with the other 
          $.get("sharedStrings.xml",{},function(xml){ 
            $('si',xml).each(function(i) { 
             shared.push($(this).find("t").text()); 

           })}); 


          }); 
          combineObjects(bigo);//combine the the array and the object. 
         }); 

は私がそれらを結合するために別の関数を使用する必要があります。ここにその機能があります。

function combineObjects(obj){ 
          myHTMLOutput = ''; 
          myHTMLOutput += '<table width="98%" border="1" cellpadding="0" cellspacing="0">'; 
          myHTMLOutput += '<th>A</th>'; 


         //mydiv=document.getElementById("ContentArea") 

        try{ 
         var strt=""; 
         var tempVal; 
        //loop throught the obejct and get the value from the returnTheValueSegment. 

        for (var ind in obj){ 
         //if you want to print something to the log then just add this. 
         // pretty handy when trying to discover variable values. does not see to work well inside for loops thought. 
         // console.log("can you see me."); 
         tempVal = returnTheValueOfSegment(obj[ind]); 
        //bring the values 
         obj[ind] = tempVal; 

         } 

         for (var ind in obj){ 


           mydata = BuildStudentHTML(ind); 
           myHTMLOutput = myHTMLOutput + mydata; 


         } 
          myHTMLOutput += '</table>'; 
           $("#ContentArea").append(myHTMLOutput); 
        } 
         catch(err){alert(err)}; 

        } 

テーブルを作成するときに問題が発生します。その基本的にヒットまたはミス... 私はfirebugを使用し、コードをステップしなければfirefoxでそれを試してみると、それ以外の場合はテーブル要素を表示しません。

ここでは、テーブルを作成するために呼び出されているコードです。

     function BuildStudentHTML(column1){ 



          // Build HTML string and return 
          output = ''; 
          output += '<tr>'; 
          output += '<td>'+ column1 +'</td>'; 
          output += '</tr>'; 
          return output; 
         } 

私は間違っている可能性があります。私はタイマーのいくつかの並べ替えが必要ですか？それはループが速くなり、ページがリフレッシュできないということです。もし誰かが正しい方向に私を指摘することができれば、私はいつも感謝の意を表します。

Answer 1

XMLファイルのHTTP要求が完了する前に、combineObjects(bigo);が呼び出されます。 $.get()は新しいHTTP要求を開始し、要求のロードが完了すると成功関数を実行します。combineObjects(bigo);を最後のXMLドキュメントのsuccess関数に入れてみることもできますが、bigoはその関数では定義されていないため動作しません。解決策は、関数を作成する関数を作成することです。 $(document).ready()関数の前にこれを入れて：

function second_XML(bigo){ 
    return function(xml){ 
     $('si', xml).each(function (i) { 
      shared.push($(this).find("t").text()); 
     }); 
     combineObjects(bigo); //combine the the array and the object. 
    } 
} 

これは、あなたが外側の変数として機能するようにbigo変数を渡すことができます。次に、2番目のXMLドキュメントをロードするコードを次のように置き換えます。

これにより、2つ目のXMLファイルがロードされるまでコードがロードされます。何らかの理由で、最初のXML文書が読み込まれる前にコードがロードされてから2番目のXML文書がロードされるので、そこに問題はありません。