“无法读取未定义的属性‘xyz’”：如何在数字 json 上使用 map 或 foreach？答案

【问题标题】："Cannot read property 'xyz' of undefined": How to use map or foreach on numeric json?“无法读取未定义的属性‘xyz’”：如何在数字 json 上使用 map 或 foreach？
【发布时间】：2019-08-17 02:55:26
【问题描述】：

我正在尝试自动生成 ChartJs 提供的图表，但我似乎无法让它工作。我正在生成一个包含所有必需信息的 .json 文件，其中包含来自数据库的名称和数字（在这种情况下是锦标赛获胜者及其获胜次数），该数据库由 PHP 文件生成。我在当前阶段的代码只是在控制台中向我抛出“无法读取未定义的属性'玩家'”错误。

我的问题是，我不太清楚，如何在这里循环遍历我的元素？

我用 map 和 forEach 尝试过，但似乎都不起作用。将“JSON_FORCE_OBJECT”添加到 json_encode 至少为数组提供了数字。

ChartJs 的主要代码：

<script>
    $.getJSON('https://DOMAIN/-chartjs-data.json', function(jsonfile) {

    var labels = jsonfile.data.final_rank_1.players.forEach((player) => {
        return player.username;
    });
    var data = jsonfile.data.final_rank_1.players.forEach((player) => {
        return player.wins;
    });

    var ctx = canvas.getContext('2d');
    var config = {
       type: 'line',
       data: {
          labels: labels,
          datasets: [{
             label: 'Graph Line',
             data: data,
             backgroundColor: 'rgba(0, 119, 204, 0.3)'
          }]
       }
    };

    var chart = new Chart(ctx, config);
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="canvas"></canvas>

json 的开头：

{
"data": [
{
"final_rank_1": {
"players": {
"0": {
"0": "Jens",
"1": "22",
"username": "Jens",
"wins": "22"
},
"1": {
"0": "Hand",
"1": "17",
"username": "Hand",
"wins": "17"
},
"2": {
"0": "Hund",
"1": "5",
"username": "Hund",
"wins": "5"
},
"3": {
"0": "Hey",
"1": "3",
"username": "Hey",
"wins": "3"
},

【问题讨论】：

看看您的JSON：1) data 属性似乎是array，而不是object。 2) players 似乎是 object，而不是 array。最后，您不能以这种方式使用 forEach 并期望它生成 array 以将其分配给 map() 所做的新变量，请阅读文档 here
它是data[0].final_rank_1.players...或者更改PHP代码不返回array。
@MartinZeitler 绝对正确，就像那样工作！
感谢@Shidersz，我更深入地查看了该文档，但不知道数组是什么以及对象是什么，真的很痛苦。感谢您的澄清。

标签： javascript php json chart.js

【解决方案1】：

变化

var labels = jsonfile.data.final_rank_1.players.forEach((player) => {
        return player.username;
    });
    var data = jsonfile.data.final_rank_1.players.forEach((player) => {
        return player.wins;
    });

到

var labels = jsonfile.data[0].final_rank_1.players.map(function(player) {
        return player.username;
    });
    var data = jsonfile.data[0].final_rank_1.players.map(function(player) {
        return player.wins;
    });

解决了我的问题。知道什么是对象和数组是非常有帮助的。

【讨论】：