Tengo una serie de objetos como este:
const data = [ { id: '1', label: 'Last Name', value: 'Smith' }, { id: '1', label: 'Last Name', value: 'Blogs' }, { id: '2', label: 'First Name', value: 'John' }, { id: '2', label: 'First Name', value: 'Joe' } ];
Estoy tratando de obtener una salida como esta:
const output = [ {key: 'Employee', value: 'John Smith'}, {key: 'Employee', value: 'Joe Blogs'} ];
Estaba buscando usar reduce, pero estoy atascado en cómo obtener correctamente una condición para decir que si id es 2, luego agregue a output.value, y si id es 1, entonces concat output.value al valor que ya existe.
Tanto el id 1 como el id 2 son dinámicos y pueden crecer. El ID 1 siempre será el apellido y el ID 2 siempre será el nombre.
.reduce()
agrupa cada ['value']
bajo ['label']['First Name']
o ['label']['Last Name']
que se convierten en matrices de objetos de group
.
A continuación .map()
itera a través output['First Name']
y luego los valores actuales de output['First Name']
y output['Last Name']
se concatenan y se agregan a un nuevo objeto creado por Object.assign()
const data = [ { id: '1', label: 'Last Name', value: 'Smith' }, { id: '1', label: 'Last Name', value: 'Blogs' }, { id: '2', label: 'First Name', value: 'John' }, { id: '2', label: 'First Name', value: 'Joe' } ]; function fullName(objArray) { let output = objArray.reduce((group, current) => { if (!group[current['label']]) { group[current['label']] = []; } group[current['label']].push(current.value); return group }, {}); console.log(`.reduce() returns: (scroll down for final result)`); console.log(output); console.log(`fullName(data) returns:`); return output['First Name'].map((first, index) => Object.assign({}, { key: 'Employee', value: first + ' ' + output['Last Name'][index] }) ); } console.log(fullName(data));
Primero debe agrupar los elementos relacionados. En estos días, puede usar el objeto Map
, pero normalmente la mayoría de la gente simplemente usaría un objeto vacío ( {}
) en parte porque así es como siempre se ha hecho para que otros programadores puedan leer fácilmente su código y en parte porque la sintaxis es más agradable de usar.
Así que la idea básica sería esta:
let group = {}; arrayData.forEach(item => { let id = item.id; if (!group[id]) { // if item does not exist in the group yet // then create item group[id] = {} } group[id][item.some_key] = item.some_value; })
Luego, después de agrupar, puede recorrer el grupo y construir una nueva matriz:
let result = []; for (let i in group) { result.push({ some_key_you_want: i.xxx + i.yyy }) }
Ahora tiene una matriz de result
que contiene los datos que desea. Por supuesto que podemos escribir esto de muchas maneras diferentes, pero lo anterior es el esquema general de la idea.
En tu caso podemos hacer:
let group = {} data.forEach(item => { let id = item.id; if (!group[id]) group[id] = {}; group[id][item.label] = item.value; }) const result = Object.values(group).map(item => { return { key: 'Employee', value: item['First Name'] + ' ' + item['Last Name'], } })