node.js - 即使我有 JSON 数据，数据也没有从 mongoDB 提取到我的图表中

Question

我的 mongoDB 中保存了数据，其中包含玩家姓名和分数，我已成功创建一个计分板，其中数据按 DESC 顺序输出(前 10 名)，但是由于某种原因，当我使用 name 以及图表上 x 轴和 y 轴的 score，chrome 的控制台错误为 score is not Defined？

任何指导，这让我花了很长时间尝试调试这个。左侧的记分板工作正常，但图表却不是......

领导力.html

<script>
    $(function() {
        //TESTING FOR LEADERSHIP BOARD ********************
        $.get("http://localhost:9000/getPlayersScoreBoard", {}, function (res) {
            let data = res;
            console.log(res);

            for (i = 0; i < data.length; i++) {
                let name = data[i].name;
                 let score = data[i].score;

                console.log(data[i].name);                                                                                          
                $("#leadership").append("<tr><td class=\"name\">"
                    + data[i].name + "</td><td class=\"score\">" 
                    + data[i].score + "</td></tr>");
            }
        });
    });

    //Bar Chart Leadership Code
var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [name],
        datasets: [{
            label: 'Leadership Board',
            data: [score],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Answer 1

您看到 score is not Defined 的原因之一是您尝试在范围之外访问它 - score 只能在您为生成表而创建的 for 循环内部可用:

for (i = 0; i < data.length; i++) {
  var name = data[i].name
  var score = data[i].score

  // `name` and `score` are available here
}
// `name` and `score` are NOT available here

此外，chart 需要一个 labels 和 data 属性的数组，但在您的示例中，由于您尝试使用 name 和 score 变量，因此它们仅引用该数组中的单个项目:

var chart = new Chart(ctx, {
  data: {
    labels: ["David", "Hugo", ...],
    datasets: [{
      data: [55, 30, ...]
    }]
  }
})

这是一个可以修复您的逻辑的解决方案。请注意，我省略了不相关的内容，并创建了一个虚假的 API 调用来尝试尽可能接近地复制您的示例:

$(function() {
  get("http://localhost:9000/getPlayersScoreBoard", {}, function(res) {
    function renderTable(items) {
      items.forEach(item => {
        var name = item.name;
        var score = item.score;

        $("#leadership").append(
          '<tr><td class="name">' +
            name +
            '</td><td class="score">' +
            score +
            "</td></tr>"
        );
      });
    }

    function renderChart(items) {
      var ctx = document.getElementById("myChart");

      var names = items.map(item => item.name);
      var scores = items.map(item => item.score);

      var chart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: names,
          datasets: [
            {
              label: "Leadership Board",
              data: scores
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }
      });
    }

    renderTable(res);
    renderChart(res);
  });
});

// Fake `get` request
function get(url, options, callback) {
  function getRandomScore(min, max) {
    return Math.floor(Math.random() * max) + min;
  }
  var data = [
    { _id: 1, name: "David", score: getRandomScore(0, 100) },
    { _id: 1, name: "Hugo", score: getRandomScore(0, 100) },
    { _id: 1, name: "Kayleigh", score: getRandomScore(0, 100) },
    { _id: 1, name: "Craig", score: getRandomScore(0, 100) },
    { _id: 1, name: "Kayz", score: getRandomScore(0, 100) }
  ];
  callback(data);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div id="leadership"></div>
  <canvas id="myChart"></canvas>
</div>