麻烦将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