"Не удается прочитать свойство 'xyz' неопределенного": как использовать map или foreach для числового json?

#javascript #php #json #chart.js

Вопрос:

Я пытаюсь автоматически сгенерировать диаграмму, предоставленную ChartJS, но, похоже, у меня не получается заставить ее работать. Я генерирую .json-файл со всей необходимой информацией, который содержит имена и номера (в данном случае победителей турниров и их количество побед) из базы данных, которая генерируется PHP-файлом. Мой код на текущем этапе просто выдает мне ошибку «Не удается прочитать свойство ‘players’ из undefined» в консоли.

Моя проблема здесь в том, что я не совсем понимаю, как перебирать мои элементы здесь?

Я пробовал это с 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"
},

1.Взгляните на свое JSON : 1) data свойство похоже на array , а не на object . 2) players похоже, что это object , а не array an. Наконец, вы не можете использовать forEach этот способ и ожидать, что он сгенерирует array для присвоения его новой переменной, как это map() делается, прочитайте документацию здесь

2. это data[0].final_rank_1.players … или измените PHP-код, чтобы он не возвращал array .

3. @MartinZeitler абсолютно правильно, работает именно так!

4. Спасибо @Shidersz, я глубже изучил эту документацию и не знаю, что такое массив и что такое объект, это действительно болезненно. Спасибо за разъяснение.

Ответ №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;
    });

решена моя проблема. Знание того, что такое объект и что такое массив, действительно полезно.