JavaScript says a defined variable inside of an Object is undefined

Question

I've been messing around with an Ajax upload tutorial I found here . I'm trying to check if the server returned "error" as the status. I found it out, it's data.result . When I do console.log(data) when data is defined, result is {"status":"error"} as expected, but when I try to call data.result in the same function, it returns undefined. I tried everything, defining it in a global variable when it's not undefined, and even passing it to another function. Here's what I have:

    progress: function(e, data){
        // calc the completion percentage of the upload
        var progress = parseInt(data.loaded / data.total * 100, 10);
        console.log(data);
        /* console log:
            Object {disabled: false, create: null, dropZone: b.fn.b.init[1], pasteZone: b.fn.b.init[1], replaceFileInput: true…}
            (more values)
            result: "{"status":"error"}"
            (more values)
        */
        // update hidden input field and trigger a change
        data.context.find('input').val(progress).change();

        if(progress == 100){
            updateProgress(data);
        }
    },

// ... later on in the file ...

function updateProgress(data){
    console.log(data);
    if(JSON.parse(data.result).status === 'error'){
        data.context.addClass('error');
    }else{
        data.context.removeClass('working');
        $('#drop').fadeOut(function(){
            $('#drop').remove();
            if(debug === 0){window.location = 'http://datastorage.iquestria.net/images/'+data.files[0].name+'?v2';}
        });
    }
}

Answer 1

After much discourse, the eventual problem was that data.result is only available reliably in the done callback, not in the progress callback where the OP was trying to access it.

---

The result of your Ajax call can ONLY be used in the callback where the data is provided. You cannot use it anywhere else. This is because the callback is called asynchronously and finishes sometime LATER after the rest of your function has already finished.

See this answer for more detail: How do I return the response from an asynchronous call?

---

Also, if you're using jQuery's ajax calls properly, you shouldn't have to do any JSON parsing yourself as jQuery will do all that for you. I don't quite understand exactly what the result is that you're getting, but if you specify the right type of data result to the ajax call, jQuery will parse it for you automatically and you won't have to call JSON.parse() yourself.

Answer 2

Looking at your code it looks like

JSON.parse(data.result).status

should be

JSON.parse(data).result.status

if 'result' is part of your JSON response. Like if your JSON is result: {"status":"error"} result won't be available until you're parse your data .