JavaScript數組數組

Question

我下載了一個網格：ParamQuery格，我需要將項目添加到它，即時通訊相當新的JavaScript，但我看到它使用的是保持其記錄在陣列陣列像這樣的可變數據：

var data = [['hello','byebye']] 

我需要從INI文件中添加這些記錄，所以現在我有這樣的代碼：

$(function() { 

var allText =[]; 
var allTextLines = []; 
var Lines = []; 
var txtFile = new XMLHttpRequest(); 
var linenumber = 0; 
var data = new Array(); 

txtFile.open("GET", "automaticlang_EN.ini", true); 
allText = txtFile.responseText; 
txtFile.onreadystatechange = function() 
{ 
    if (txtFile.readyState == 4) 
    { 

       // Makes sure it's found the file. 
       allText = txtFile.responseText; 
       allTextLines = allText.split(/\r\n|\n/); 
       var data = new Array([allTextLines]); 

       console.log(data[0]); 
      } else { 
      } 

    } 
txtFile.send(null) 
//console.log(data); 


//var data = [['hello','byebye']] //this works 


    var obj = { width: 700, height: 700, title: "Translation Grid",resizable:true,draggable:true }; 
    obj.colModel = [{ title: "ID", width: 100, dataType: "string" }, 
    { title: "Translation", width: 200, dataType: "string" }]; 
    obj.dataModel = { data: data }; 
    $("#grid_array").pqGrid(obj); 

}); 

我犯規給我，結果什麼即時做錯了什麼？

Answer 1

你的代碼是不工作的原因是，你要使用你的data變量回調之外的XMLHttpRequest。嘗試使用data的代碼在發出GET請求後立即運行，而不是在服務器返回值之後運行。

所以你需要解決的主要問題是設置裏面XMLHttpRequest回調。

只是爲了好玩，我怔了一些其他的東西給你：

• 由於您使用jQuery，您可以使用$.ajax()代替繁瑣XMLHttpRequest的。
• 添加了一個$.trim(allText)調用來去除任何前導或尾隨空格。特別是，這將刪除所有尾隨的換行符，這樣如果最後一行的最後一行有換行符，就不會在數組中出現多餘的空字符串。
• 對.split()使用了比較簡單的正則表達式。
• 僅使用數組文字而不是new Array。正如nkron指出的那樣，同時具有new Array和的數組文字爲您提供了一個比您想要的級別更高的嵌套數組。數組文字幾乎總是比new Array更具可讀性。
• 重新安排了pqGrid設置對象的設置。你做這件事的方式沒有什麼不妥（除了很長的一行），只是在另一種方式來設置它。
• 清理縮進和長行。

$(function() { 
    $.ajax({ 
     url: "automaticlang_EN.ini", 
     dataType: "text" 
    }).done(function(allText) { 
     var allTextLines = $.trim(allText).split(/\r?\n/); 
     var data = [ allTextLines ]; 

     $("#grid_array").pqGrid({ 
      width: 700, 
      height: 700, 
      title: "Translation Grid", 
      resizable: true, 
      draggable: true, 
      colModel: [ 
       { 
        title: "ID", 
        width: 100, 
        dataType: "string" 
       }, { 
        title: "Translation", 
        width: 200, 
        dataType: "string" 
       } 
      ], 
      dataModel: { 
       data: data 
      } 
     }); 
    }); 
}); 

Answer 2

我覺得你很親密。 JavaScript's XMLHttpRequest open()方法的第三個參數是數據是否是異步請求的。 true表示下載將開始，然後在一段時間後完成下載結束時調用的onreadystatechange回調。

這裏有幾個選項。您可以傳入false而不是true，並在send()調用後保留數據處理代碼，因爲這會導致下載在send()返回之前完成。這通常令人不悅，因爲它會導致瀏覽器在下載完成之前停止進行任何處理。

您的其他選擇是保持異步下載並將數據處理代碼移入onreadystatechange回調。這將允許瀏覽器在下載文件時繼續處理其他事件。

我看到的另一個問題是您在外部函數和onreadystatechange函數中說var data變量。這將導致內部函數中的data變量與外部變量不同。所以當你設置內部data時，函數返回時它的值將會丟失。要解決此問題，請從內部函數的data之前刪除var，以便內部函數使用由外部函數定義的data。

最後，它看起來像是將數據封裝在太多的數組中。將一個[]放在數據周圍應該足夠了。

回顧一下，這裏有兩個選項。使用同步下載&修復data範圍：

$(function() { 
    var txtFile = new XMLHttpRequest(); 
    var data; 

    txtFile.open("GET", "automaticlang_EN.ini", /* async = */ false); 

    txtFile.onreadystatechange = function() { 
    if (txtFile.readyState === 4) { 
     // Makes sure it's found the file. 
     var allText = txtFile.responseText; 
     var allTextLines = allText.split(/\r\n|\n/); 
     data = [allTextLines]; 
    } 
    }; 

    txtFile.send(); 

    var obj = { width: 700, height: 700, title: "Translation Grid",resizable:true,draggable:true }; 
    obj.colModel = [{ title: "ID", width: 100, dataType: "string" }, 
        { title: "Translation", width: 200, dataType: "string" }]; 
    obj.dataModel = { data: data }; 
    $("#grid_array").pqGrid(obj); 
}); 

使用異步和移動加工成的onreadystatechange：

$(function() { 
    var txtFile = new XMLHttpRequest(); 

    txtFile.open("GET", "automaticlang_EN.ini", /* async = */ true); 

    txtFile.onreadystatechange = function() { 
    if (txtFile.readyState === 4) { 
     // Makes sure it's found the file. 
     var allText = txtFile.responseText; 
     var allTextLines = allText.split(/\r\n|\n/); 
     var data = [allTextLines]; 

     var obj = { width: 700, height: 700, title: "Translation Grid",resizable:true,draggable:true }; 
     obj.colModel = [{ title: "ID", width: 100, dataType: "string" }, 
         { title: "Translation", width: 200, dataType: "string" }]; 
     obj.dataModel = { data: data }; 
     $("#grid_array").pqGrid(obj); 
    } 
    }; 

    txtFile.send(); 
});