A user can select a filter their audiences with a dropdown of workspaces:
const selectedWorkspaces = [
{
name: 'workspace-foo',
uid: 'wk_12345',
...
},
{
name: 'workspace-bar',
uid: 'wk_54321',
...
},
];
lets say those ^ are the selected workspaces.
I then have a table that renders the audiences that have an array of workspaces they are a part of:
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'],
...
},
]
I would like to filter out the audiences that contain the selected workspaces and I am having difficulties understanding exactly how to do that. I want an array of audiences returned back to render and then when the filters are deselected render them all.
Any ideas as to compare two arrays of strings against each other? Admittedly loops are my weak point.
You can do a linear search filter through the audience array using the Array.prototype.some() and Set functionalities.
const selectedWorkspaceSet = new Set();
selectedWorkspaces.forEach( workspace => selectedWorkspaceSet.add(workspace.uid));
const filteredAudiences = audiences .filter( audiences => !audiences.workspaces.some( workspace => selectedWorkspaceSet.has(workspace)));
Just make a seperate array that contains only the workspace Ids and filter the audiences along with the some method to return the audiences you want
var workspaceIdArray = selectedWorkspaces.map((workspace) => workspace.uid)
var filteredAudiences = audiences.filter((audience) => workspaceIdArray.some((id) => audience.workspaces.includes(id)))
You should probably make some kind of AudienceController, that uses .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));