Javascript ajax add data to object

Question

I have this code, where i create a object imagesAndName. this line will add data to the object

imagesAndName[0] = new Array("name", "image");

But in code below i receive data from an ajax call. Now i want to add this data to the object. But it doesn't work.

$(document).ready(function()
{
    // create variables
    var imagesAndName = {};
    fillImagesAndNameObject();

function fillImagesAndNameObject()
{
    $.ajax({
        url     : '../api/displayinformation.php',
        contentType: 'application/json',
        type: "POST",
        dataType: "json",
        data: 1,
        success: function (data)
        {
            var present = data["teachers"];
            $.each(present, function( key, value ) {
                var name = value["name"];
                var image = '<img src="'+ value["image"] +'"height="100" width="100"/>';
                imagesAndName[key] = new Array(name,image);
            });
        }
    });

}
});

I have create a callback but it still doesn't work

function fillImagesAndNameObject(imagesAndName, returnData) {
    var json = JSON.stringify(
        {
            "method": "getAbsentTeachers",
            "displayId": displayId
        });

    $.ajax({
        url: '../api/displayinformation.php',
        contentType: 'application/json',
        type: "POST",
        dataType: "json",
        data: json,
        success: returnData,
        error: function () {
            console.log('Something went wrong');
        }
    });
}
// create variables
var imagesAndName = {};


fillImagesAndNameObject(imagesAndName, function( returnValue ){
    var present = returnValue["teachers"];
    $.each(present, function( key, value ) {
        var name = value["name"];
        var image = '<img src="'+ value["image"] +'"height="100" width="100"/>';
        alert(image);
        imagesAndName[key] = new Array("test","test2");
    });
});

You claim the `dataType` to be `json` but you're posting bare '1'. — haim770, Jan 11 '15 at 13:40
What makes you think it doesn't work? I can't see any attempt to examine the success or failure of what you are trying to do. — Quentin, Jan 11 '15 at 13:41
normaly i dont post 1 but: var json = JSON.stringify( { "method": "getAbsentTeachers", "displayId": displayId }); After calling the displayInformation.php i received the information but cant add them to object imagesAndName — Bham, Jan 11 '15 at 13:42
@haim770 its the `contentType` that is related to whats being posted not the `dataType` see http://stackoverflow.com/questions/2722750/ajax-datatype — Musa, Jan 11 '15 at 13:58
@Musa, You're right. I noticed they're both JSON but wrote the wrong name. — haim770, Jan 11 '15 at 14:00
@Bham — How do you know it doesn't work? You still don't appear to be looking at the results of your assignments anywhere. — Quentin, Jan 11 '15 at 14:17
When googling on ajax asynchronous callback i cant find no solutions — Bham, Jan 11 '15 at 15:19
You still haven't explained why you think there is a problem. — Quentin, Jan 11 '15 at 15:38

score 0 · Answer 1 · answered Jan 11 '15 at 17:13

I have solved the problem. The problem was i need to add a callback function and a extra param for the object

var imagesAndName       = {};

//makes an ajax request with the specific parameters
function ajaxRequest(file, json, callback, obj) /* <-- Callback, obj (imagesAndname) */
{
    $.ajax({
        url: file,
        contentType: 'application/json',
        type: "POST",
        dataType: "json",
        data: json,
        success: function(data) {
            if (data["result"] === "success")
            {
                //the callback with data from ajax and the object (imagesAndName)
                callback(data, obj); 
            }
        }
    });
}

getPresentTeachers(1);

/**
 * Call to ajaxRequest to get the present teachers belong to
 * to this displayid
 * @param displayid
 */
function getPresentTeachers(displayid)
{
    var json = JSON.stringify(
        {
            "method": "getAbsentTeachers",
            "displayId": displayid
        });
     /* <- adding callback method and the object imagesAndName */
    ajaxRequest("../api/displayinformation.php", json, fillObjectWithPresentTeachers, imagesAndName); 
}

/**
 * Fill the object imagesAndName with data received from the ajaxRequest
 * @param data
 */
function fillObjectWithPresentTeachers(data, obj)
{
    var present = data["teachers"];
    for(var y = 0; y < present.length; y++)
    {
        obj[y] = new Array(present[y]["name"],present[y]["image"]);
    }
    fillList();
}

In the function fillObjectWithPresentTeachers i have 2 params: data , obj data is from the ajax call and obj is imagesAndName

Now in function fillList() i can see if i call the imagesAndName length its giving back the corrent information.

I hope this is also usefull for other people.

Javascript ajax add data to object

1 Answers1