如何在JavaScript中清理对象数组内的嵌套数组以适配HighCharts数据格式

核心转换逻辑 #

你只需要通过两层map遍历即可完成结构转换，第一层遍历年份分组，第二层提取每个月份的amount数值：

const formattedData = rawData.map(yearItem => ({
  // 将数字类型年份转为要求的字符串类型
  year: String(yearItem.year),
  // 提取每月amount组成新数组
  data: yearItem.data.map(monthItem => monthItem.amount)
}))

React useState 完整示例 #

如果原始数据是异步请求获取的，建议在useEffect中完成转换后再存入state：

import { useState, useEffect } from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

const RevenueChart = () => {
  const [chartData, setChartData] = useState([])

  useEffect(() => {
    // 此处替换为你的实际数据请求逻辑
    const fetchRawData = async () => {
      // 模拟接口返回原始数据
      const rawData = [
        {
          year: 2021,
          data: [
            { month: 'Jan', amount: 5000000 },
            { month: 'Feb', amount: 3500000 },
            { month: 'Mar', amount: 15000000 },
            { month: 'Apr', amount: 5000000},
            { month: 'May', amount: 3500000 },
            { month: 'Jun', amount: 15000000 },
            { month: 'Jul', amount: 13000000 },
            { month: 'Aug', amount: 20000000 }
          ]
        },
        {
          year: 2020,
          data: [
            { month: 'Jan', amount: 5000000 },
            { month: 'Feb', amount: 3500000 },
            { month: 'Mar', amount: 15000000 },
            { month: 'Apr', amount: 5000000},
            { month: 'May', amount: 3500000 },
            { month: 'Jun', amount: 15000000 },
            { month: 'Jul', amount: 13000000 },
            { month: 'Aug', amount: 20000000 }
          ]
        }
      ]

      // 执行结构转换
      const processedData = rawData.map(item => ({
        year: String(item.year),
        data: item.data.map(month => month.amount)
      }))

      setChartData(processedData)
    }

    fetchRawData()
  }, [])

  // HighCharts 配置示例
  const options = {
    title: { text: '年度月度营收统计' },
    xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] },
    series: chartData.map(item => ({
      name: item.year,
      data: item.data
    }))
  }

  return <HighchartsReact highcharts={Highcharts} options={options} />
}

export default RevenueChart

常见问题排查 #

如果之前存入state失败，可优先检查以下几点：

• 第一层map是否正确返回了包含year和data的对象，没有遗漏return
• 是否将数字类型的year转为了字符串类型，和HighCharts要求的结构对齐
• 如果是异步请求数据，是否在拿到完整响应后才执行转换逻辑，避免处理空数组
• 第二层遍历是否正确提取了amount字段，没有拼写错误

内容的提问来源于stack exchange，提问作者leobiscuits