Javascript：如何改进这些地图功能？

Question

I have a similar structure:

const items = [
  {
    hip: 40,
    waist: 41,
    neck: 42,
    knee: 43,
    arm: 44,
    weight: 45,
  },
  {
    hip: 46,
    waist: 47,
    neck: 48,
    knee: 49,
    arm: 50,
    weight: 51,
  }
];

To use it in Highcharts, I need to transform in a similar:

series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

So, I wrote this:

const singleItem = props.items[0];

      const keys = Object.keys(singleItem);

      let singleSerie = [];

      keys.map(key => {
          let tempData = {
            name: key,
            data: []
          };
          const series = props.items.map(el => {
            return el[key]
          });
          tempData.data = series
          singleSerie.push(tempData)
          return singleSerie;
      })

It works, but it seems... "ugly". Is it possible to improve it?

Answer 1

You can simplify to

const keys = Object.keys(props.items[0]);

const singleSeries = keys.map(key => {
  return {
    name: key,
    data: props.items.map(el => el[key]),
  };
});

When already using map , don't use push . And you can just inline the series expression in the data object literal.

Also you might want to hardcode the keys , so that you don't get back no series if the items array is empty.

Answer 2

You can map the keys to their data points.

 const items = [ { hip: 40, waist: 41, neck: 42, knee: 43, arm: 44, weight: 45 }, { hip: 46, waist: 47, neck: 48, knee: 49, arm: 50, weight: 51 } ]; const toSeries = (data) => Object.keys(data?.[0]).map((name) => ({ name, data: data.map(obj => obj[name]) })); const chart = Highcharts.chart('container', { chart: { type: 'line' }, title: { text: 'Title' }, xAxis: { title: { text: 'X-Axis Label' } }, yAxis: { title: { text: 'Y-Axis Label' } }, series: toSeries(items) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/9.3.0/highcharts.min.js"></script> <div id="container"></div>