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

Question

我正在尝试自动生成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"
},

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

解决了我的问题。了解对象是什么以及数组是什么，确实很有帮助。