Can't access variable value in javascript

The problem is that you are making an asynchronous call (the AJAX request) so your JavaScript continues and doesn't wait for the call to come back.

So the call to get_label_pic() will take no time at all and your code will continue straight to the console.log(labeled_pic) (which won't be set yet, because the success callback in your AJAX call won't have finished.

If you want to us it, then you'll need to put your code into your AJAX success, or call another function from it:

function get_label_pic(){
    $.ajax({
        url: "localhost/advanceSearch/index/getlabelpic",
        type: "POST",
        dataType: "json",
        success: function(data) {
            $.each(data, function(key, data){
                labeled_pic[key] = data;
            });
            testing = "testing";

            console.log(labeled_pic); // this will show the values
            callmyOtherFunction(); // To call something else
        }
    });
};
get_label_pic();
console.log(labeled_pic); // This will be undefined

What actually happens is this:

1. Creates the function get_label_pic
2. Calls get_label_pic()
   1. Makes the ajax request
3. Calls console.log
4. Script is at the end
5. Some time passes, then the server response comes back
   1. Iterates through the data, setting labeled_pic[key]
   2. Sets testing = 'testing'
   3. Calls console.log(labeled_pic);
   4. Calls callmyOtherFunction()

As your ajax call is asynchronous, there is a great chance that you will try to read the array, before the ajax-call is completed. If you you create a callback-function to be triggered when the ajax-call is complete, and put your code within that callback, then you are sure that the ajax-call is complete, before you are trying to access the array.

function get_label_pic(){
    $.ajax({
        url: "localhost/advanceSearch/index/getlabelpic",
        type: "POST",
        dataType: "json",
        success: function(data) {
            $.each(data, function(key, data){
                labeled_pic[key] = data;
            });
            testing = "testing";
        },
        complete: doWhatYouWantToDo()
    });
};

function doWhatYouWantToDo()
{
   alert(labled_pic[3]); // <!-- now the array is populated
}

The function is a closure and hence labeled pic has fallen out of scope.

If you pass it as a parameter to your callback function it will be encapsulated in the closure and available at the time the callback is executed .

HTH

You have to call console.log(labeled_pic); inside the success callback of the $.ajax

...
 success: function(data) {
            $.each(data, function(key, data){
                labeled_pic[key] = data;
            });
            testing = "testing";
            //here call the console.log
        }
...

you must execute that code at the end of success function, so your code must look like this:

var labeled_pic = new Array();
var testing;
function get_label_pic(){
    $.ajax({
        url: "localhost/advanceSearch/index/getlabelpic",
        type: "POST",
        dataType: "json",
        success: function(data) {
            $.each(data, function(key, data){
                labeled_pic[key] = data;
            });
            testing = "testing";


        $("#result").append("<img src='" + labeled_pic[3] +"' />");

    }
});


};
get_label_pic();