Muchas veces se necesita agrupar objetos JSON desde JavaScript. Hoy vamos a ver como se agrupa un objeto JSON usando JavaScript y para ello utilizaremos el método reduce(), pero antes de seguir indagando en el tema veremos como funciona el método reduce() de JavaScript.
Como funciona el método reduce() de JavaScript
Este método itera cada elemento de un array y lo convierte a un único valor que puede ser un número, un String, un objeto u otro array. Para ello, este método utiliza la siguiente sintaxis:
array.reduce(function(total, valor_actual),valorDevueltoPorDefecto)
Un ejemplo sencillo de este método sería el siguiente: Supongamos el siguiente objeto JSON:
let JSONObject = [
{
vessel: 'C1',
ID: 'EN-111',
firstname:'Peter',
lastname:'Parker',
coursecode: 'MATH0001',
coursename: 'MATHMATICS',
duration: '30',
startDate: '02-05-2021',
endDate: '01-06-2021',
grade: '98',
attendance: '100'
},
{
vessel: 'C1',
ID: 'EN-111',
firstname:'Peter',
lastname:'Parker',
coursecode: 'MATH0001',
coursename: 'MATHMATICS',
duration: '30',
startDate: '02-09-2021',
endDate: '01-10-2021',
grade: '78',
attendance: '100'
},
{
vessel: 'C1',
ID: 'EN-111',
firstname:'Peter',
lastname:'Parker',
coursecode: 'PHIS0001',
coursename: 'PHISICS',
duration: '15',
startDate: '02-06-2021',
endDate: '10-06-2021',
grade: '99',
attendance: '98'
},
{
vessel: 'C1',
ID: 'EN-111',
firstname:'Peter',
lastname:'Parker',
coursecode: 'MATH0001',
coursename: 'MATHMATICS',
duration: '30',
startDate: '28-10-2021',
endDate: '15-11-2021',
grade: '100',
attendance: '92'
},
];
En el objeto anterior, tenemos un alumno: ‘Peter Parker’ que ha cursado dos asignaturas: Física y Matemáticas, pero la asignatura de Matemáticas aparece repetida porque se ha realizado en tres ventanas de tiempo. Con el método reduce() de JavaScript se puede calcular la nota media final de cada asignatura y dependiendo del resultado que queramos, podremos devolver un único valor o un objeto.
Método reduce que devuelve un valor numérico
Con este método se agrupa un objeto JSON con JavaScript pero obteniendo como resultado un único valor numérico.
let cont=1;
let FinalGradeMath = JSONObject.reduce((total, obj)=>{
if (obj.coursecode=='MATH0001'){
total=total+obj.grade;
cont++;
}
return total/cont;
},0}
El resultado de la función anterior devuelve la media aritmética de las notas que el alumno ha sacado en la asignatura de matemáticas.
MÉTODO REDUCE QUE DEVUELVE UN OBJETO JSON
El método reduce de JavaScript permite agrupar los elementos de un objeto JSON devolviendo por cada valor la nota media. Así, si tenemos dos asignaturas: «MATHMATICS» y «PHYSICS», podemos aplicar el método reduce para obtener un objeto agrupado como el siguiente ejemplo:
let JSONObject = [
{
vessel: 'C1',
ID: 'EN-111',
firstname:'Peter',
lastname:'Parker',
coursecode: 'MATH0001',
coursename: 'MATHMATICS',
duration: '90',
startDate: '02-05-2021',
endDate: 15-11-2021',
grade: '92',
attendance: '97.33'
},
{
vessel: 'C1',
ID: 'EN-111',
firstname:'Peter',
lastname:'Parker',
coursecode: 'PHIS0001',
coursename: 'PHISICS',
duration: '15',
startDate: '02-06-2021',
endDate: '10-06-2021',
grade: '99',
attendance: '98'
}
En el ejemplo anterior, el método reduce agrupa el objeto JSONcalculando:
- la nota media de la asistencia y las notas
- la duración total que se calcula como la suma de todas sus coincidencias para la asignatura de mátemáticas
- la fecha de finalización es la fecha máxima de todas las coincidencias
const singleresult= JSONObject.reduce((arr,currentValue)=>{
//Filtramos por código de curso. filteredResult será un objeto con los resultados para un mismo curso
const filteredResult = JSONObject.filter((obj) => {
return obj.coursecode=== currentValue.coursecode;
});
//Si solo hay un curso, lo metemos en el array que devolveremos como resultado
if (filteredResult.length==1){
arr.push(currentValue);
} else if (filteredResult.length>1){ //Si el resultado es más de uno, volvemos a aplicar reduce para calcular la media, duracion total y fecha máxima de finalización
const singleValuefromFilteredList=filteredResult.reduce((lista,value)=>{
lista.duration=Number(lista.duration)+Number(value.duration);
lista.duration=String(lista.duration);
if (value.startDate<=lista.startDate)
lista.startDate=value.startDate;
if (value.endDate>=lista.endDate)
lista.endDate=value.endDate;
return lista;
},{vessel: currentValue.vessel, ID: currentValue.ID, firstname: currentValue.firstname, lastname: currentValue.lastname, coursecode: currentValue.coursecode, coursename: currentValue.coursename, duration:'0', startDate: currentValue.startDate, endDate: currentValue.endDate, attendance: currentValue.attendance, grade: currentValue.grade});
//Por último verificamos que el objeto no haya sido añadido ya al array resultado, aplicando esta vez el filtro al array 'arr'
const checkifExists = arr.filter((obj)=>{
return obj.coursecode=== singleValuefromFilteredList.coursecode;
});
if (checkifExists.length==0)
arr.push(singleValuefromFilteredList);
}
return arr;
},[]);
Con todo esto, reduce es un método de JavaScript que permite agrupar objetos JSON con JavaScript. Espero que este post sobre el método reduce de JavaScript, haya sido útil.
Saludos y Feliz Happycoding.