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

Question

I'm trying to automatically generate a chart provided by ChartJs, but I cannot seem to get it to work. I'm generating a .json-file with all the neccessarry information, which contains names and numbers (tournament winners and their amount of wins in this case) from the database, which is generated by a PHP-file. My code at the current stage just throws me a "Cannot read property 'players' of undefined" error in the console.

My problem here is, that I don't quite know, how to loop through my elements here?

I tried it with map and forEach, but neither seem to work. Adding "JSON_FORCE_OBJECT" to json_encode at least provided numbers to the array.

Main code for 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>

Beginning of the 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

Changing

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

to

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

resolved my issue. Knowing what an object is and what an array is, is really helpful.