Question

I’ve been trying to get this right for quite some time, I’m trying to append the object from the first ajax call after the second ajax call. But the for loop seems to iterate the changing of the value to the last result before appending the information, having the last post appended every time.

    var scribjson = 
{
    "user_id" : localStorage.viewing,
};
scribjs = JSON.stringify(scribjson);
var scrib = {json:scribjs};
$.ajax({
    type: "POST",
    url: "getScribbles.php",
    data: scrib,
    success: function(result)
    {     
        var obj = jQuery.parseJSON(result);
        for(var i = 0; i < obj.length; i+=1)
        {   
            var userjson = 
            {
                "user_id" : obj[i].user_id
            };
            userjs = JSON.stringify(userjson);
            var user = {json:userjs};
            localStorage.post = obj[i].post;
            $.ajax({
                type: "POST",
                url: "getRequestsInfo.php",
                data: user,
                success: function(result)
                {     
                    var obj2 = jQuery.parseJSON(result);
                    $('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
                    $('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
                },
                error: function()
                {
                    alert('An Error has occured, please try again.');
                }
            });

        }
    },
    error: function()
    {
        alert('An Error has occured, please try again.');
    }
});

Answer 1

Since ajax calls It looks like the all success functions of the inner ajax call are being called after the loop has ended, so i will always be the last iterated value.

Try this:

(function(i)
{

    $.ajax({
        type: "POST",
        url: "getRequestsInfo.php",
        data: user,
        success: function(result)
        {     
            var obj2 = jQuery.parseJSON(result);
            $('#listOfScribbles').append("<tr><td><img id = 'small_pic' src = '" + obj2[0].profileImage + "'/></td><tr><td>" + obj2[0].firstname + " " + obj2[0].lastname + "</td></tr> ");
            $('#listOfScribbles').append("<tr><td>" + obj[i].post + "</td></tr>");
        },
        error: function()
        {
            alert('An Error has occured, please try again.');
        }
    });
})(i);

This will create a closure on i, which will give each ajax call its own copy of the current value.