0

Iam trying to fetch values from json data to display details in a table. i have two json objects as follows.I have to fetch names and script from secong json object by passing jobid from first json object.that all are working fine. 

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"
}]

second josn object

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"
}

But my problem is am getting table data only when i alert eg:alert(k) or something like that.without alert anything my testname and testscript column of table appears 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);
}

Also my first json contains repeated jobid's so $.get('/getJobs', params, function (data) {... called multiple times.how it can be avoid??? http://jsfiddle.net/GXVpa/3/

ajp15243
  • 7,704
  • 1
  • 32
  • 38
Psl
  • 3,830
  • 16
  • 46
  • 84
  • 1
    FYI, JSON is a string format. What you're talking about are object literals – Phil Oct 04 '13 at 04:06
  • actually these json objects are getting from db.i actully put the data – Psl Oct 04 '13 at 04:12
  • @Psl There is no need to have that many question marks. You have well exceeded your daily allowed limit for question marks and you will be charged $0.25 per question mark you use until the time limit elapses. – Ryan Bigg Oct 04 '13 at 22:51

1 Answers1

1

It is because of the async nature of ajax request, any code that deals with the ajax response data needs to be added to the success callback

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

More details: Read this

Update

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);
}
Community
  • 1
  • 1
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531