Tengo un problema con un código, tengo 3 variables users
, toDoList
y tasksDone
:
- una almacena una lista de usuarios (cada uno con su propiedad
id
,name
ytasks: []
) - la segunda es una lista de tareas (es la misma para todos los usuarios, la razón por la que está en una variable independiente es porque se obtiene de una consulta diferente a la BD), cada una con su propiedad
id
,task
(nombre de la tarea) ydone
(booleano que indica si se ha realizado la tarea, por defecto todas están enfalse
) - la tercera es una lista con las tareas realizadas, cada una con la propiedad
user_id
,task_id
y el booleanodone
entrue
Lo primero que hago es asignar la lista de tareas completa a cada usuario mediante una función map:
users = users.map((user) => {
user.tasks = [...toDoList];
return user;
});
Ahora cada usuario de la lista aparece con este formato:
{
id: 1,
name: "Joe",
tasks: [{
id: 1,
task: "task one",
done: false
}]
}
La variable tasksDone
tiene el siguiente formato, para el ejemplo suponemos que el usuario con id 3 realizó las tareas 1 y 2:
const tasksDone = [
{
user_id: 3,
task_id: 1,
done: true
},
{
user_id: 3,
task_id: 2,
done: true
}
];
El problema viene a continuación: A la variable usuario la recorro con la función map, la idea es que por cada usuario dentro de users
, mediante un ciclo for se comprueba si el id ese usuario aparece dentro de algún elemento recorrido de tasksDone
, si es así, significa que el usuario ha realizado una tarea:
users = users.map((user, index) => {
for (let i = 0; i < tasksDone.length; i++) {
if (user.id === tasksDone[i].user_id) {
console.log("Usuario coincide! ID: ", user.id);
user.tasks[i].done = tasksDone[i].done; // Estableciendo 'done' a 'true' para la tarea y usuario actual
}
}
return user;
});
Con lo anterior se supone que solo debería modificar el estado de la propiedad done
a true
si ha habido una coincidencia, sin embargo cuando verifico la lista de usuarios, todos aparecen con las tareas 1 y 2 marcadas en true
aunque solo haya una coincidencia, pueden ver el código en acción aquí: https://codesandbox.io/s/snowy-dream-0993d?file=/src/index.js
Saludos!
EDIT:
A sugerencia de Mauricio, cambié la lógica de asignación después del primer if, ya que como mencionó, estaba asumiendo que la lista tasks de cada usuario tenía la misma longitud que la lista de tareas realizadas:
users = users.map((user, index) => {
for (let i = 0; i < tasksDone.length; i++) {
if (user.id === tasksDone[i].user_id) {
console.log("Usuario coincide! ID: ", user.id);
//user.tasks[i].done = tasksDone[i].done;
user.tasks.forEach(item=>{
if(item.id === tasksDone[i].task_id) {
item.id = true;
}
})
}
}
return user;
});
Pero aun así me modifica a todos los users.
user.tasks[i].done = tasksDone[i].done;
estás asumiendo que la lista de tareas de un usuario coincide en tamaño con la lista de tareas realizadas, aún más, asumes que la posición de la tarea en la lista del usuario coincide con la posición de la tarea realizada en la lista de tareas. La lógica de eso parece errónea. Saludos