Can't use the array that php returns

Question

I am getting an array returned from PHP which I json_encode() in php first and I echo that array. I get the array with an AJAX request disabling "Async". I know I shouldn't use that but it was the only way I could find.

It returns me this:

{"id":"38","name":"111111111111111111111111111111111111111111111.jpg"}

And this is my AJAX request:

function uploadFile(file){
    var formData = new FormData();
    formData.append('formData', file);
    $.ajax({
        url: 'inc/ajax/uploadFile.php',  //Server script to process data
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        async:   false,
        //Ajax events
        success: function(html){
            strReturn = html;
        }
    });
    return strReturn;
}

When I do this I get the whole array:

var img = uploadFile(file);
console.log(img);

But when I call "img.name" or img.id" it says undefined.

To make this asynchronous just run whatever code expects the output from the `uploadFile` function in the `success` callback of your AJAX call. That way the code runs when the data is available, and you don't have to lock-up the browser to do it. — Jasper, Aug 28 '13 at 19:20

score 3 · Answer 1 · answered Aug 28 '13 at 19:19

3

You're receiving back a JSON string representation of an object. Tell jQuery that you're expecting JSON, so that it parses it into an actual Javascript object for you:

data: formData,
dataType: 'json', // Add this line

answered Aug 28 '13 at 19:19

Paul

139,544
27
275
264

@Xegano You're welcome. Btw, you can and *should*, definitely heed the advice others have given you, about removing the `async: false`. It is always possible to do, you just need to get your head around callbacks and the fact that functions are [first-class citizens](http://en.wikipedia.org/wiki/First-class_function) in Javascript. – Paul Aug 28 '13 at 19:25

score 1 · Answer 2 · answered Aug 28 '13 at 19:23

You need set dataType to json and you should use a callback you are probably returning strReturn before it is populated.

function uploadFile(file,callback){
    var formData = new FormData();
    formData.append('formData', file);
    $.ajax({
        url: 'inc/ajax/uploadFile.php',  //Server script to process data
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        dataType: "json",
        //Ajax events
        success: function(html){
            strReturn = html;
            callback(strReturn);
        }
    });
}

uploadFile(file,function(img){
    console.log(img.name);
});

Ionel Lupu · Answer 3 · 2013-08-28T19:28:12.387

0

Try this:

function uploadFile(file){
    var formData = new FormData();
    formData.append('formData', file);
    $.ajax({
        url: 'inc/ajax/uploadFile.php',  //Server script to process data
        type: 'POST',
        data: formData,
        contentType: false,
        dataType: "json",
        processData: false,
        //Ajax events
        success: function(html){
            strReturn = html;
            return strReturn;
        }
    });
}

It says undefined because the strReturn is not defined at the moment you return it. The ajax's success method is called with a delay of some milliseconds so you have to return your variable after the ajax is finished.

edited Aug 28 '13 at 19:28

answered Aug 28 '13 at 19:21

Ionel Lupu

2,695
6
29
53

Well sorry . I just copied the code from above and added what it was necessary. – Ionel Lupu Aug 28 '13 at 19:29
1

This wouldn't work anyway. Your `return` statement doesn't return from `uploadFile`, but from the anonymous success callback function. So `var result = uploadFile(whatever)` still wouldn't get the correct result back. – Jason P Aug 28 '13 at 19:29

Can't use the array that php returns

3 Answers3