Question

Iam尝试从json数据中获取值以在表中显示详细信息。我有两个json对象如下。我必须通过从第一个json对象传递jobid来从secong json对象获取名称和脚本。这一切都正常工作。

var recent= [{
    "jobid": "4",
    "browser": "FF20",       
    "names": "abc@gmail.com",
    "datetime": "Thu Oct 03 2013 13:41:06 GMT+0530 (IST)",
    "_id": "524d269a6d32804512000001"
}, {
    "jobid": "34",
    "browser": "GC23",       
    "names": "abc@gmail.com",
    "datetime": "Thu Oct 03 2013 13:41:47 GMT+0530 (IST)",
    "_id": "524d26c36d32804512000002"
}, {
    "jobid": "34",
    "browser": "IE8",       
    "names": "abc@gmail.com",
    "datetime": "Thu Oct 03 2013 13:41:50 GMT+0530 (IST)",
    "_id": "524d26c66d32804512000003"
}, {
    "jobid": "34",
    "browser": "FF20",       
    "names": "abc@gmail.com",
    "datetime": "Thu Oct 03 2013 13:41:53 GMT+0530 (IST)",
    "_id": "524d26c96d32804512000004"
}, {
    "jobid": "34",
    "browser": "GC23",      
    "names": "abc@gmail.com",
    "datetime": "Thu Oct 03 2013 13:41:55 GMT+0530 (IST)",
    "_id": "524d26cb6d32804512000005"
}]

第二个josn对象

var data = {
    "_id": ObjectId("524507068d8f5f6eee8bc602"),
    "id": "86",
    "names": "jhkujiyo",
    "script": "art-pagination"
} {
    "_id": ObjectId("524508788d8f5f6eee8bc605"),
    "id": "79",
    "names": "koiuo",
    "script": "panini-main-flow"
} {
    "_id": ObjectId("52450a0f8d8f5f6eee8bc606"),
    "id": "34",
    "names": "ioiuo",
    "script": "panini-silk-flow"
} {
    "_id": ObjectId("524a4f4cc973602da0d4ee10"),
    "id": "4",
    "names": "tuesdat val",
    "script": "art-pagination"
}

但我的问题是，只有当我发出警告时才会收到表格数据：alert(k)或类似的内容。没有提醒我的testname and testscript列表格显示undefined

var name=[],script=[];
function recentTests() {

        var k = 0;
    $('#recentTest').html('');
    var recentlist = "<table class='tablestyle'><tr><th class='thstyle' >Browser</th><th class='thstyle' >Test Name</th><th class='thstyle' >TestScript</th><th class='thstyle' >User</th><th class='thstyle' >Date</th></tr>";

    //   alert("Recent-----------"+JSON.stringify(recent));    
    recent.forEach(function (result) {

        var params = {
            "id": result.jobid
        };

        $.get('/getJobs', params, function (data) {
            **alert("data-----------" + JSON.stringify(data));// the above json data object is getting from db...so i staticly put** 
            data.forEach(function (value) {
                script.push(value.script);
                name.push(value.names);
            });

        });

        alert(k)
        recentlist += '<tr><td class="tdstyle">' + result.browser + '</td><td class="tdstyle">' + script[k] + '</td><td class="tdstyle">' + name[k] + '</td><td class="tdstyle">' + result.names + '</td><td class="tdstyle">' + result.datetime + '</td>'
        k++;
    });

    recentlist += '</table>';
    $('#recentTest').html(recentlist);
}

另外我的第一个json包含重复的jobid，所以$.get('/getJobs', params, function (data) {...多次调用。如果它可以避免??? http://jsfiddle.net/GXVpa/3/

Answer 1

由于ajax请求的异步性质，任何处理ajax响应数据的代码都需要添加到成功回调中

var name = [],
    script = [];

function recentTests() {

    var recentlist = $("<table class='tablestyle'><tr><th class='thstyle' >Browser</th><th class='thstyle' >Test Name</th><th class='thstyle' >TestScript</th><th class='thstyle' >User</th><th class='thstyle' >Date</th></tr></table>");

    //   alert("Recent-----------"+JSON.stringify(recent));    
    recent.forEach(function (result) {

        var params = {
            "id": result.jobid
        };

        $.get('/getJobs', params, function (data) {
            data.forEach(function (value) {
                script.push(value.script);
                name.push(value.names);
                recentlist.append('<tr><td class="tdstyle">' + result.browser + '</td><td class="tdstyle">' + value.script + '</td><td class="tdstyle">' + value.names + '</td><td class="tdstyle">' + result.names + '</td><td class="tdstyle">' + result.datetime + '</td>')
            });

        });
    });

    $('#recentTest').empty().append(recentlist);
}

更多详情：Read this

<强>更新

function recentTests() {
    var jobMap = {};

    var recentlist = $("<table class='tablestyle'><tr><th class='thstyle' >Browser</th><th class='thstyle' >Test Name</th><th class='thstyle' >TestScript</th><th class='thstyle' >User</th><th class='thstyle' >Date</th></tr></table>");

    //   alert("Recent-----------"+JSON.stringify(recent));    
    recent.forEach(function (result) {
        if (jobMap[result.jobid]) {
            return;
        }

        var params = {
            "id": result.jobid
        };

        jobMap[result.jobid] = true;
        $.get('/getJobs', params, function (data) {
            data.forEach(function (value) {
                recentlist.append('<tr><td class="tdstyle">' + result.browser + '</td><td class="tdstyle">' + value.script + '</td><td class="tdstyle">' + value.names + '</td><td class="tdstyle">' + result.names + '</td><td class="tdstyle">' + result.datetime + '</td>')
            });
        });
    });

    $('#recentTest').empty().append(recentlist);
}

使用Jquery使用json对象

1 个答案: