Tengo una estructura similar:
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, } ];Para usarlo en Highcharts, necesito transformarlo en algo 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] }],Entonces, escribí esto:
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; })Funciona, pero parece... "feo". ¿Es posible mejorarlo?
Puedes simplificar a
const keys = Object.keys(props.items[0]); const singleSeries = keys.map(key => { return { name: key, data: props.items.map(el => el[key]), }; }); Cuando ya esté usando map , no use push . Y puede simplemente alinear la expresión de la series en el literal del objeto de datos.
También es posible que desee codificar las keys , de modo que no obtenga ninguna serie si la matriz de items está vacía.
Puede asignar las claves a sus puntos de datos.
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>