将 API 结果传递到图表时遇到问题 [关闭]

Question

当我获取 API 时，一切正常，但是当我将函数放入图表的数据持有者时，它会在控制台中显示错误。我不知道出了什么问题，因为当我进行单独检查时，我可以看到所有数字，但是当我将该函数放入数据字段时却没有。我还发布了示例 API。

怎么了？

const api = "http://localhost:8080/webmap/api/chartforweek/username1";

let chartForOneWeek = [];

function showAll() {
  fetch(api)
    .then(response => {
      return response.json();
    })
    .then((oneWeekChar) => {
      chartForOneWeek = oneWeekChar;
      console.table(chartForOneWeek);


    })
    .catch(err => {
      console.log(err);
    })
}

function showUser() {
  chartForOneWeek.forEach(oneweek => {
    oneweek.averageDose;

  });
}

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: showUser(), //==========> I tried putting this in here and I tried [showUser] and I also tried [chartForOneWeek.averageDose] //

      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [], //=====> what should I put for data?
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

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

这是示例 API 数据：

[
  {
    "currentTime": null,
    "date": {
      "year": 2019,
      "month": "APRIL",
      "dayOfMonth": 10,
      "dayOfWeek": "WEDNESDAY",
      "era": "CE",
      "dayOfYear": 100,
      "leapYear": false,
      "monthValue": 4,
      "chronology": {
        "id": "ISO",
        "calendarType": "iso8601"
      }
    },
    "userName": "username1",
    "currentMeal": 0.0,
    "currentBloodSugar": 0.0,
    "currentDose": 0.0,
    "averageDose": 2.56,
    "averageBloodSugar": 110.0
  }

Answer 1

我认为这里的问题是 fetch 是一个异步调用，在您创建图表之前它还没有完成。在继续之前，您需要进行某种等待。

"Synchronous" fetch with async/await