AJAX JQuery | accessing returned object data

Question

I am trying to access data returned in an Ajax call I have made. This is referencing the steam API and is successfully returning the data. I have console logged it to check. Whenever I try and access the data i get and undefined console message.

Below is a snippet of my returned JSON file

{
"playerstats": {
    "steamID": "Removed for SO",
    "gameName": "ValveTestApp260",
    "stats": [
        {
            "name": "total_kills",
            "value": 7642
        },
        {
            "name": "total_deaths",
            "value": 7349
        },
        {
            "name": "total_time_played",
            "value": 427839
        },
        {
            "name": "total_planted_bombs",
            "value": 341
        },

Below is the code for my ajax call

$.ajax({
    url: this.props.url,
    dataType: 'json',
    crossDomain: true,
    success: function(data) {
        console.log("success", typeof data);
        console.log(data.playerstats.stats.total_kills);
        console.log(data["playerstats"]["stats"]["total_kills"]);
    }.bind(this),
        error: function(xhr, status, err, data) {
        console.error(this.props.url, status, err.toString());
    }.bind(this)
});

I am successfully entering the success function but it is displaying the following in the console

success object
Inline JSX script:21 undefined
Inline JSX script:22 undefined

the 2 undefined errors are appearing on the console.log line where I have tried accessing the Data the only thing I can think of is that I am accessing them wrong.

Attempts

console.log(data.playerstats.stats.total_kills);
console.log(data["playerstats"]["stats"]["total_kills"]);

your data.playerstats.stats is an array and not object. You cannot access the total_skills for it.. Please check — Akshay Khandelwal
– Akshay Khandelwal, Commented Sep 16, 2015 at 8:46
@AkshayKhandelwal but the console log type of is telling me its an object success object — Kieranmv95
– Kieranmv95, Commented Sep 16, 2015 at 8:47
data.playerstats.stats.forEach(function (stat) { alert(stat.value); //property for stats are name and value }); — Vinay Pratap Singh Bhadauria
– Vinay Pratap Singh Bhadauria, Commented Sep 16, 2015 at 8:54

laruiss · Accepted Answer · 2015-09-16 09:04:37Z

1

total_kills is not a property of stats, nor even a property of every item in stats, but a value of the property "name", you want the value of the property "value" of every item in the stats array:

$.ajax({
    url: this.props.url,
    dataType: 'json',
    crossDomain: true,
    success: function(data) {
        console.log("success", typeof data);
        data.playerstats.stats.forEach(function (stat) {
            console.log(stat.value);
        });
    }.bind(this),
        error: function(xhr, status, err, data) {
        console.error(this.props.url, status, err.toString());
    }.bind(this)
});

To get only the item which has "total_kills" as the value of its "name" property, you can use this :

var totalKillsObj = data.playerstats.stats.reduce(function(item) {
  return item.name === 'total_kills';
});

var totalKills = totalKillsObj.value;

edited Sep 16, 2015 at 9:04

answered Sep 16, 2015 at 8:47

laruiss

3,8261 gold badge21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kieranmv95 Over a year ago

When I try this I get (193) undefined in the console

Kieranmv95 Over a year ago

This has worked, one more question. How do I get it to only access a specific item, say total_wins etc rather than returning everything

laruiss Over a year ago

Well, you could use .filter() or .reduce() or underscore(-like) library to filter only the item which has "total_kills" as the value of its "name" property...

laruiss Over a year ago

Note: Array.prototype.reduce() is only available in IE10+ caniuse.com/#search=reduce, so if you have to support IE <= 9, you can fall back to using underscore/lodash/rambda 's reduce function

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Demo Fiddle

var data = {
    "playerstats": {
        "steamID": "Removed for SO",
            "gameName": "ValveTestApp260",
            "stats": [{
            "name": "total_kills",
                "value": 7642
        }, {
            "name": "total_deaths",
                "value": 7349
        }, {
            "name": "total_time_played",
                "value": 427839
        }, {
            "name": "total_planted_bombs",
                "value": 341
        }]
    }
}
alert(data.playerstats.steamID);
data.playerstats.stats.forEach(function (stat) {
    alert(stat.name + ":" + stat.value);//property for stats are name and value
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 16, 2015 at 8:56

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

AJAX JQuery | accessing returned object data

Attempts

2 Answers 2

4 Comments

Demo Fiddle

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Attempts

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related