Me gustaría hacer algunas conversiones usando lodash groupby a una matriz de objetos. Aplicando a 2 llaves primero clazz_id y luego mes dando como resultado la suma del nivel.
import './App.css' import _ from 'lodash' import { useEffect } from 'react' import moment from 'moment' import groupBy from 'lodash/groupBy' const data1 = [ { id: 1, clazz_id: 1, answers: [ { level: 8, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 1, created_at: '2022-02-19T09:13:42.149+08:00' }, ], }, { id: 2, clazz_id: 2, answers: [ { level: 7, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 2, created_at: '2022-03-19T09:13:42.149+08:00' }, ], }, { id: 3, clazz_id: 2, answers: [ { level: 3, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 8, created_at: '2022-02-19T09:13:42.149+08:00' }, ], }, ] const App = () => { const data2 = [] useEffect(() => { data1.map((item) => { item.answers.map((e) => { data2.push({ clazz_id: item.clazz_id, level: e.level, month: moment(e.created_at).format('MMM'), }) }) }) const a = groupBy(data2, 'clazz_id', 'month') console.log(a) }, []) return <div className='App'>test</div> } export default AppSin embargo, el mes no se aplicó correctamente. Cualquier ayuda sería muy apreciada.
El resultado debería ser:
[{clazz_id: 1, level: 8, month: 'Jan'}, {clazz_id: 1, level: 1, month: 'Feb'}] [{clazz_id: 2, level: 10, month: 'Jan'}, {clazz_id: 2, level: 8, month: 'Feb'}, {clazz_id: 2, level: 2, month: 'Mar'}]Podría obtener el resultado requerido usando un par de llamadas a Array.reduce() , creando una clave de agrupación basada en clazz_id y month .
Luego sumamos el valor de level para cualquier elemento que comparta la misma clave:
const data1 = [ { id: 1, clazz_id: 1, answers: [ { level: 8, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 1, created_at: '2022-02-19T09:13:42.149+08:00' }, ], }, { id: 2, clazz_id: 2, answers: [ { level: 7, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 2, created_at: '2022-03-19T09:13:42.149+08:00' }, ], }, { id: 3, clazz_id: 2, answers: [ { level: 3, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 8, created_at: '2022-02-19T09:13:42.149+08:00' }, ], }, ] const result = Object.values(data1.reduce((acc, { clazz_id, answers }) => { return answers.reduce((acc, { level, created_at }) => { const month = moment(created_at).format('MMM'); const key = `${clazz_id}-${month}`; acc[key] = acc[key] || { clazz_id, level: 0, month }; acc[key].level += level return acc; }, acc); }, {})); console.log('Result:') result.forEach(r => console.log(JSON.stringify(r))) <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Con Javascript simple, podría reducir con un objeto anidado.
const data = [{ id: 1, clazz_id: 1, answers: [{ level: 8, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 1, created_at: '2022-02-19T09:13:42.149+08:00' }] }, { id: 2, clazz_id: 2, answers: [{ level: 7, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 2, created_at: '2022-03-19T09:13:42.149+08:00' }] }, { id: 3, clazz_id: 2, answers: [{ level: 3, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 8, created_at: '2022-02-19T09:13:42.149+08:00' }] }], result = Object .values(data.reduce((r, { clazz_id, answers }) => { r[clazz_id] ??= {}; answers.forEach(({ level, created_at }) => { const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], monthV = new Date(created_at).getMonth(), month = months[monthV]; r[clazz_id][monthV] ??= { clazz_id, level: 0, month }; r[clazz_id][monthV].level += level; }); return r; }, {})) .map(Object.values); console.log(result); .as-console-wrapper { max-height: 100% !important; top: 0; }Esto probablemente también funcionará. Aplicar reduce después de que los datos se organicen de cierta manera.
import './App.css' import _ from 'lodash' import { useEffect } from 'react' import moment from 'moment' import groupBy from 'lodash/groupBy' const data1 = [ { id: 1, clazz_id: 1, answers: [ { level: 8, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 1, created_at: '2022-02-19T09:13:42.149+08:00' }, ], }, { id: 2, clazz_id: 2, answers: [ { level: 7, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 2, created_at: '2022-03-19T09:13:42.149+08:00' }, ], }, { id: 3, clazz_id: 2, answers: [ { level: 3, created_at: '2022-01-19T09:13:42.149+08:00' }, { level: 8, created_at: '2022-02-19T09:13:42.149+08:00' }, ], }, ] const App = () => { const data2 = [] useEffect(() => { data1.map((item) => { item.answers.map((e) => { data2.push({ clazz_id: item.clazz_id, level: e.level, month: moment(e.created_at).format('MMM'), }) }) }) console.log(data2) var o = {} var result = data2.reduce(function (r, e) { var key = e.clazz_id + '|' + e.month if (!o[key]) { o[key] = e r.push(o[key]) } else { o[key].level += e.level } return r }, []) console.log(result) }, []) return <div className='App'>test</div> } export default App