Question

我不是一个受过JS教育的人，由于某种原因我觉得我在这种用法上错了，但基本的想法是在数据库中查询em列表; 在每个第一个循环内，在表中创建一行，按照JSON调用中的值使用＆amp; emkey 并从每列返回的4中输入2个数值。

$.getJSON(base_url+"&list=1",  function(data) {
$.each(data,function(key,value){
    var row='<tr>';
    row+='<th>'+ value+'</th>';     
    $.getJSON(base_url+"&emkey="+value,  function(data2) {
        $.each(data2,function(key,value){
                    // fix me //
            row+='<td>'+ value[1]+'</td>';
            row+='<td>'+ value[3]+'</td>';
            row+="</tr>";
        });
    });
    document.getElementById("tabledata1").innerHTML+=row;
});
});

第一次JSON返回

jQuery110209887605804210914_1389710560683([
['uno'],
['dos'],
['tres'],
['cuatro'],
['cinco']
]);

第二个电话示例（4more）：

jQuery110209887605804210914_1389710560683([
['in',130,'out',198]
]);

currenlty我正在为该组的每一行设置HTML表格，并且firebug正确显示每个JSON调用

Answer 1

$.getJSON 异步！当您调用$.getJSON时，它会在后台运行该AJAX调用，然后继续执行您的代码。在遥远的未来某个时刻 - 当AJAX调用完成时 - 然后将运行回调。此时document.getElementById("tabledata1").innerHTML+=row;已经运行，因此将row设置为某些内容无济于事。

你可以做的是，等到所有的AJAX调用完成后，做这样的事情：

$.getJSON(base_url+"&list=1",  function(data) {
    var rowAJAX = [],
        rowData = [];

    $.each(data, function(key, value){
        // Fire all the ajax calls and save their promises
        rowAJAX.push($.getJSON(base_url+"&emkey="+value));
        // Also save the associated header values
        rowData.push(value);
    });

    // Wait until all the AJAX calls are done
    $.when.apply($, rowAJAX).done(function(){
        // then loop through the data return by each and build the table
        for(var i = 0, len = arguments.length; i < len; i++){
            var row = '<tr>',
                thisRow = arguments[i][0],
                header = rowData[i],

            row += '<th>'+ header +'</th>';
            $.each(thisRow, function(key2, value2){
                row += '<td>'+ value2[1]+'</td>';
                row += '<td>'+ value2[3]+'</td>';
            });
            row += "</tr>";

            document.getElementById("tabledata1").innerHTML += row;
        }
    });
});

此代码未经测试，但希望能在此处大致了解解决方案。

Answer 2

从我的理解...最好不要在代码中前进，直到你得到JSON的回复......

$.getJSON(base_url+"&listem=1",  function(data) {
$.each(data,function(key,value){
    var row='<tr>';
    row+='<th>'+ value+'</th>';     
    $.getJSON(base_url+"&start="+d+"&emkey="+value,  function(data) {
            $.each(data,function(key,value){
                 row+='<td>'+ value[1]+'</td>';
                 row+='<td>'+ value[3]+'</td></tr>';            
                 document.getElementById("tabledata1").innerHTML+=row;
                 });
           });
    });
});

这个新循环正在创建表，结果是我所期望的，但正在将表格绘制在另一个div上。

Answer 3

我从另一个答案here in this

开始研究ie8和firefox

$.getJSON(base_url+"&listem=1",  function(data) {
$.each(data,function(key,value){
    var country = value;    
    $.getJSON(base_url+"&emkey="+value,  function(data) {
            $.each(data,function(key,value){
                addRow(country,value[1],value[3]);
            })
        })
    })
});
function addRow(country,totin,totout) {
        var tableElement = document.getElementById("tabledat");
        if (tableElement) {
            var newTable = document.createElement('tbody');   // New
            var newRow = document.createElement("tr");
            var newcountry = document.createElement("td");
            var newtotin = document.createElement("td");
            var newtotout= document.createElement("td");
            newcountry.appendChild(document.createTextNode(country));
            newtotin.appendChild(document.createTextNode(totin));
            newtotout.appendChild(document.createTextNode(totout));
            newRow.appendChild(newcountry);
            newRow.appendChild(newtotin);
            newRow.appendChild(newtotout);
            newTable.appendChild(newRow);   // New
            tableElement.appendChild(newTable);   // New
            //alert("code executed!");
        }
    }
})

更改表格ID中的HTML以匹配id“tabledat”

getJSON（）在newrow ie8中的getJSON（）循环中

3 个答案: