如何从Axios POST返回的对象数组中提取指定属性以适配Chart.js折线图需求

看起来你遇到的核心问题是Chart.js不接受对象数组作为数据源，得把date和weightOne分别提取成单独的数组对吧？我来帮你一步步解决这个问题，顺便排查下你之前代码返回空数组的可能原因~

先确认Axios返回的数据结构 #

你提到返回了14个对象，假设单个对象的结构大概是这样（结合你说的属性）：

// 示例单个 workout 记录对象
{
  date: "2024-02-15",
  weightOne: 72.5,
  // 其他无关属性...
}

要注意：Axios的响应数据默认存在response.data里，很多时候空数组就是因为没拿到正确的数据源层级！

方法一：用数组map方法（最简洁高效） #

map方法可以直接把对象数组转换成你需要的属性数组，代码非常清爽：

// 示例Axios请求逻辑
axios.post('/your-api-url', yourRequestData)
  .then(response => {
    // 先把响应里的对象数组取出来
    const workoutRecords = response.data;
    
    // 提取所有date作为x轴标签数组
    const dateLabels = workoutRecords.map(record => record.date);
    // 提取所有weightOne作为y轴数据数组
    const weightData = workoutRecords.map(record => record.weightOne);
    
    console.log(dateLabels); // 现在应该能看到所有日期了
    console.log(weightData); // 现在应该能看到所有weightOne数值了

    // 接下来直接用这两个数组初始化Chart.js折线图
    const chartCtx = document.getElementById('your-chart-id').getContext('2d');
    new Chart(chartCtx, {
      type: 'line',
      data: {
        labels: dateLabels, // x轴用日期数组
        datasets: [{
          label: 'Weight One 训练进度',
          data: weightData, // y轴用重量数组
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1
        }]
      }
    });
  })
  .catch(error => {
    console.error('请求出错啦:', error);
  });

方法二：用for循环（适合习惯传统循环的场景） #

如果你之前用循环没成功，大概率是数据源获取或者循环逻辑有问题，试试这个写法：

axios.post('/your-api-url', yourRequestData)
  .then(response => {
    const workoutRecords = response.data;
    const dateLabels = [];
    const weightData = [];

    // 用for...of循环遍历每个记录对象
    for (const record of workoutRecords) {
      dateLabels.push(record.date);
      weightData.push(record.weightOne);
    }

    // 也可以用普通for循环
    // for (let i = 0; i < workoutRecords.length; i++) {
    //   dateLabels.push(workoutRecords[i].date);
    //   weightData.push(workoutRecords[i].weightOne);
    // }

    console.log(dateLabels, weightData);
    // 这里继续初始化Chart.js即可
  })
  .catch(error => console.error(error));

为什么你之前的代码返回空数组？ #

大概率是这几个原因：

• 没拿到正确的数据源：你可能直接用了response而不是response.data（Axios把接口返回的真实数据存在data属性里）
• 属性名大小写不匹配：比如你代码里写的是WeightOne，但接口返回的是weightOne（注意首字母大小写）
• 数据结构嵌套层级不对：比如接口返回的是{ code: 200, data: [你的记录数组] }，这时候你得先取response.data.data才是目标数组

你可以在.then里先执行console.log(response.data)，看看控制台里的真实数据结构，确认数组和属性名是不是和你预期的一致~

备注：内容来源于stack exchange，提问作者Lucas Hagan