Un usuario puede seleccionar un filtro de sus audiencias con un menú desplegable de espacios de trabajo:
const selectedWorkspaces = [ { name: 'workspace-foo', uid: 'wk_12345', ... }, { name: 'workspace-bar', uid: 'wk_54321', ... }, ];digamos que esos ^ son los espacios de trabajo seleccionados.
Luego tengo una tabla que muestra las audiencias que tienen una variedad de espacios de trabajo de los que forman parte:
const audiences = [ { uid: 'aud_1234', workspaces: ['wk_12345', 'wk_47856', 'wk_23942'], ... }, { uid: 'aud_4321', workspaces: ['wk_12345', 'wk_54321', 'wk_02394'], ... }, { uid: 'aud_9876', workspaces: ['wk_54321', 'wk_23894', 'wk_02384'], ... }, ]Me gustaría filtrar las audiencias que contienen los espacios de trabajo seleccionados y tengo dificultades para entender exactamente cómo hacerlo. Quiero una serie de audiencias devueltas para renderizar y luego, cuando los filtros no estén seleccionados, renderizarlos todos.
¿Alguna idea para comparar dos matrices de cadenas entre sí? Es cierto que los bucles son mi punto débil.
Puede hacer un filtro de búsqueda lineal a través de la matriz de audiencia usando las funcionalidades Array.prototype.some() y Set .
const selectedWorkspaceSet = new Set(); selectedWorkspaces.forEach( workspace => selectedWorkspaceSet.add(workspace.uid)); const filteredAudiences = audiences .filter( audiences => !audiences.workspaces.some( workspace => selectedWorkspaceSet.has(workspace)));Simplemente haga una matriz separada que contenga solo los ID del espacio de trabajo y filtre las audiencias junto con some método para devolver las audiencias que desea
var workspaceIdArray = selectedWorkspaces.map((workspace) => workspace.uid) var filteredAudiences = audiences.filter((audience) => workspaceIdArray.some((id) => audience.workspaces.includes(id)))Probablemente deberías hacer algún tipo de AudienceController , que use .filter :
const selectedWorkspaces = [ { name: 'workspace-foo', uid: 'wk_12345' }, { name: 'workspace-bar', uid: 'wk_54321', } ]; const audiences = [ { uid: 'aud_1234', workspaces: ['wk_12345', 'wk_47856', 'wk_23942'] }, { uid: 'aud_4321', workspaces: ['wk_12345', 'wk_54321', 'wk_02394'] }, { uid: 'aud_9876', workspaces: ['wk_54321', 'wk_23894', 'wk_02384'] } ]; function AudienceController(audiencesArray){ this.audiences = audiencesArray; this.include = selectedWorkspacesArray=>{ let w; return this.audiences.filter(o=>{ w = o.workspaces; for(let o of selectedWorkspacesArray){ if(w.includes(o.uid)){ return o; } } }); } this.exclude = selectedWorkspacesArray=>{ let w; return this.audiences.filter(o=>{ w = o.workspaces; for(let o of selectedWorkspacesArray){ if(!w.includes(o.uid)){ return o; } } }); } } const ac = new AudienceController(audiences); console.log(ac.exclude(selectedWorkspaces));