如何在$ .ajax方法的success属性中访问对象的元素？

Question

function getReportedInfo(id) {
    $.ajax({
        url: 'includes/get_data.php',
        type: 'POST',
        data: {id:id},
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    });
};

The JSON object returned from the get_data.php script is:

{
    id: 5, 
    username: "Anthony", 
    status: "accupied"
}

I am able to the length of the data object if I do console.log(data.length). However, I can see the object when I console.log(data) in the success property. I am not able to access the elements of the data obejct if I do console.log(data.username), doing this displays undefined in the console. I created a variable, data1, outside the scope of the function getReportedInfo and assigned the data retrieved via the success property to this variable after I tried to display the constents of data1 outside the function.

Answer 1

Sounds like data is a string not an object. You can convert this to an object by using JSON.parse. Try the following code.

function getReportedInfo(id) {
    $.ajax({
        url: 'includes/get_data.php',
        type: 'POST',
        data: {id:id},
        dataType: 'json',
        success: function(data) {
            var dataObject = JSON.parse(data);
            console.log(dataObject.username);
        }
    });
};

Edit

After discussing with OP in comments below, it was determined the object returned data was in a structure like the following, and is already in an object form (not a string)

{
    "0": {
        id: 5, 
        username: "Anthony", 
        status: "accupied"
    }
}

Therefor the following code should work.

function getReportedInfo(id) {
    $.ajax({
        url: 'includes/get_data.php',
        type: 'POST',
        data: {id:id},
        dataType: 'json',
        success: function(data) {
            console.log(data["0"].username);
        }
    });
};