Tengo una serie de datos que estoy ingresando en una aplicación React:
const knowledgeData = [ { id: 'connect', catTitle: 'Connectivity', subTitle:'Very Slow - Loader Stays on', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'UNABLE TO LOG IN', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'UNABLE TO PRINT REPORT', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'Unable To Covert a PDF', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: 'app', catTitle: 'Staff App Issues', subTitle:'Unable to access photos', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, ];Los datos se utilizan para una wiki del personal: necesito mostrar los datos en un arreglo agrupado, agrupados por ID, ya que cada grupo de datos está separado en el diseño en su propia cuadrícula, por lo que, por ejemplo, todos los problemas relacionados con CMS se agrupan bajo el título CMS CUESTIONES etc
Llegué a una declaración de mapa y estoy perplejo con un enfoque para resolver el problema:
returnFields = () =>{ this.state.knowledgeData.map((data,i) => { //for each datatype:( //return( //HTML containing mapped data here with group title wrap }); }¿Alguien puede sugerir una buena solución aquí?
Sugeriría crear una función groupBy() para su matriz de entrada, luego puede agrupar por la propiedad deseada.
La función groupBy usa Array.reduce() para crear un objeto agrupado con una matriz de objetos en cada valor de id, en este caso connect , cms y app :
const knowledgeData = [ { id: 'connect', catTitle: 'Connectivity', subTitle:'Very Slow - Loader Stays on', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'UNABLE TO LOG IN', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'UNABLE TO PRINT REPORT', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: '`cms`', catTitle: 'CMS ISSUES', subTitle:'Unable To Covert a PDF', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, { id: 'app', catTitle: 'Staff App Issues', subTitle:'Unable to access photos', subData:'<><p>Lorem Ipsum Solar denar.</p><p>lorem imsum again.</p></>' }, ]; function groupBy(input, key) { return input.reduce((acc, el) => { acc[el[key]] = acc[el[key]] || []; acc[el[key]].push(el); return acc; }, {}); } const grouped = groupBy(knowledgeData, 'id'); console.log('Result:'); for(let key in grouped) { console.log('Group:', key); console.log(grouped[key]); } .as-console-wrapper { max-height: 100% !important; }¿Estás obteniendo los resultados que deseas?
const result = knowledgeData.reduce((acc, cur) => { acc[cur.id] = [...(acc[cur.id] || []), cur]; return acc; }, {});