AJAX 查询 |访问返回的对象数据答案

【问题标题】：AJAX JQuery | accessing returned object dataAJAX 查询 |访问返回的对象数据
【发布时间】：2015-09-16 08:43:03
【问题描述】：

我正在尝试访问在我进行的 Ajax 调用中返回的数据。这是引用 steam API 并成功返回数据。我有控制台记录它来检查。每当我尝试访问我得到的数据和未定义的控制台消息时。

下面是我返回的 JSON 文件的 sn-p

{
"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
        },

下面是我的ajax调用代码

$.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)
});

我成功进入了success函数，但是控制台显示如下

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

console.log 行上出现了 2 个未定义的错误，我曾尝试在该行访问数据，但我唯一能想到的是我访问错误。

尝试

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

【问题讨论】：

你有corssDomain，应该是crossDomain。
你的 data.playerstats.stats 是一个数组而不是对象。您无法访问它的 total_skills .. 请检查
@AkshayKhandelwal 但控制台日志类型告诉我它是一个对象success object
欢迎使用 Javascript 我的朋友.. typeOf(Array) = "Object"
data.playerstats.stats.forEach(function (stat) { alert(stat.value); //stats 的属性是名称和值 });

标签： javascript jquery json ajax object

【解决方案1】：

total_kills 不是 stats 的属性，甚至不是stats 中每个项目的属性，而是属性"name" 的一个值，你想要值属性 "value" 统计数组中每个项目的：

$.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)
});

要仅获取具有"total_kills" 作为其"name" 属性值的项目，您可以使用：

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

var totalKills = totalKillsObj.value;

【讨论】：

当我尝试这个时，我在控制台中得到(193) undefined
这有效，还有一个问题。如何让它只访问特定项目，比如 total_wins 等，而不是返回所有内容
好吧，您可以使用 .filter() 或 .reduce() 或 underscore(-like) 库来过滤仅具有 "total_kills" 作为其“名称”属性值的项目。 .
注意：Array.prototype.reduce() 仅在 IE10+ 中可用 caniuse.com/#search=reduce，所以如果你必须支持 IE

【解决方案2】：

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
});

【讨论】：