JavaScript code not checking ajax request properly

Question

I have a case of the Thursdays and I am wondering why this isn't working.

The Problem: I cannot return the value of an array from AJAX request even though the page returns it successfully.

So, here's my AJAX request:

    $.ajax({
    type: "GET",
    url: "get-sendgrid-info.php?username=" + emailToCheck,
        success: function(dataSG) {
            console.log("Length: " + dataSG.length + " Username: " + dataSG[0].username);

            if (dataSG[0].username) {
                console.log('CURRENTLY IN SEND GRID!');
                $(".sgstatus").html("<div style='font-weight:bold;color:green;'>CURRENTLY IN SENDGRID</div>");
            }else{
                console.log('NOT IN SEND GRID!');
                $(".sgstatus").html("<div style='font-weight:bold;color:red;'>NOT IN SENDGRID</div>");
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
            console.log(errorThrown);
        }
    });

and that dataSG will call that php page:

    if ($email) echo json_encode($data);
}
$stmt->close();
$mysqli->close();

which will output something like this:

Array
(
    [0] => stdClass Object
        (
            [username] => sample@email.net
            [email] => sample@email.net
            [active] => true
            [first_name] => John
            [last_name] => Doe
            [address] => 123 Fake Street
            [address2] => Suite117
            [city] => Denver
            [state] => CO
            [zip] => 12345
            [country] => US
            [phone] => 555-555-5555
            [website] => http://website.com
            [website_access] => true
        )

)
1

(yes, even that 1 ).

So, when I try this after the AJAX request

        if (dataSG[0].username) {
            console.log('CURRENTLY IN SEND GRID!');
            $(".sgstatus").html("<div style='font-weight:bold;color:green;'>CURRENTLY IN SENDGRID</div>");
        }else{
            console.log('NOT IN SEND GRID!');
            $(".sgstatus").html("<div style='font-weight:bold;color:red;'>NOT IN SENDGRID</div>");
        }

I always get NOT IN SENDGRID even though the response shows an array with a username clearly in it.

Help, please?

edit: I should add that I am on a IIS server.

edit: Response console says:

Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}abort: 
...

Object
create-email.php:2629 SyntaxError: Unexpected token A {stack: (...), message: "Unexpected token A"}message: "Unexpected token A"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error

Answer 1

Try this:

...
success: function(dataSG) {
    dataSG = JSON.parse(dataSG);
...

Answer 2

I think the reason is that your pho script is echoing the string start with "Array". The Ajax .get method does a smart guess for return object. When it receive a string from php, it could not convert it into either Jason nor xml so it think the dataSG is simply string. The Json_encode did not do it successfully. You have to format your php output to be something like "['a','b']", then Ajax can successfully convert it into a JavaScript array.