使用javascript更新带有循环对象的网页

updating the web page with looping object with javascript

本文关键字:对象 网页 循环 javascript 更新 使用      更新时间:2023-09-26

我遇到过编程语言中最令人沮丧的问题之一。我正在阅读一些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.
                        });

由于我有两个读取的两个不同的xml文件,我不得不使用另一个函数来组合它们。这就是函数。

  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)};
                    }

我的问题出现在创建表的时候。它基本上是命中或未命中。。。如果我在firefox中尝试它,它只有在我使用firebug并逐步执行代码的情况下才有效,否则它不会显示表元素。

这是为生成表而调用的代码。

                        function BuildStudentHTML(column1){

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

我可能做错了什么。我需要某种计时器吗?是循环过快,页面无法刷新吗。如果有人能给我指明正确的方向,我将永远感激。

在您的代码中,在对XML文件的HTTP请求完成之前,会调用combineObjects(bigo);$.get()启动一个新的HTTP请求,然后在请求完成加载后运行成功函数您可以尝试将combineObjects(bigo);放在最后一个XML文档的成功函数中,但这不会起作用,因为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变量作为外部变量传递给函数。接下来,将加载第二个XML文档的代码替换为:

//get the shared string elements to combine with the other 
$.get("sharedStrings.xml", {}, second_XML(bigo));

这将使代码等待第二个XML文件加载后再将两者组合。出于某种原因,您已经让代码等待第一个XML文档加载后再加载第二个,因此不会出现问题。