Filtering a nested array by comparing to the values in another array

Question

I'm trying to filter the list array below if the skill parameter matches the values in the panel array. But it keeps returning an empty array or if I negate the filter, it returns the entire list array that I'm trying to filter.

The method I'm using is

// but it returns an empty array.  
const remove = list.filter((element) => panel.includes(element.skill))

// returns the whole list. 
const remove = list.filter((element) => !panel.includes(element.skill))

const panel = ['Frontend', 'Junior', 'CSS'];

const list = [
  {
    id: 1,
    Img: PhotoImg,
    company: 'Photosnap',
    post: 'NEW!',
    featured: 'FEATURED',
    jobtitle: 'Senior Frontend Developer',
    time: '1d ago',
    contract: 'Full Time',
    location: 'USA only',
    skill: ['Frontend', 'Senior', 'HTML', 'CSS', 'JavaScript'],
  },
  {
    id: 2,
    Img: ManageImg,
    company: 'Manage',
    post: 'NEW!',
    featured: 'FEATURED',
    jobtitle: 'Fullstack Developer',
    time: '1d ago',
    contract: 'Part Time',
    location: 'Remote',
    skill: ['Fullstack', 'Midweight', 'Python', 'React'],
  },
  {
    id: 3,
    Img: AccountImg,
    company: 'Account',
    post: 'NEW!',
    jobtitle: 'Junior Frontend Developer',
    time: '2d ago',
    contract: 'Part Time',
    location: 'USA only',
    skill: ['Frontend', 'Junior', 'React', 'Sass', 'JavaScript'],
  },
  {
    id: 4,
    Img: MyhomeImg,
    company: 'MyHome',
    jobtitle: 'Junior Frontend Developer',
    time: '5d ago',
    contract: 'Contract',
    location: 'USA only',
    skill: ['Frontend', 'Junior', 'CSS', 'Javascript'],
  },
  {
    id: 5,
    Img: LoopImg,
    company: 'Loop Studios',
    jobtitle: 'Software Engineer',
    time: '1w ago',
    contract: 'Full Time',
    location: 'Worldwide',
    skill: ['Fullstack', 'Midweight', 'Javascript', 'Sass', 'Ruby'],
  },
  {
    id: 6,
    Img: FaceImg,
    company: 'FaceIt',
    jobtitle: 'Junior Backend Developer',
    time: '2w ago',
    contract: 'Full Time',
    location: 'UK only',
    skill: ['Backend', 'Junior', 'Ruby', 'RoR'],
  },
  {
    id: 7,
    Img: ShortlyImg,
    company: 'Shortly',
    jobtitle: 'Junior Developer',
    time: '2w ago',
    contract: 'Full Time',
    location: 'Worldwide',
    skill: ['Frontend', 'Junior', 'HTML', 'Sass', 'JavaScript'],
  },
  {
    id: 8,
    Img: InsureImg,
    company: 'Insure',
    jobtitle: 'Junior Frontend Developer',
    time: '2w ago',
    contract: 'Full Time',
    location: 'USA only',
    skill: ['Frontend', 'Junior', 'Vue', 'JavaScript', 'Sass'],
  },
  {
    id: 9,
    Img: EyeImg,
    company: 'Eyecam Co.',
    jobtitle: 'Full Stack Engineer',
    time: '3w ago',
    contract: 'Full Time',
    location: 'Worldwide',
    skill: ['Fullstack', 'Midweight', 'Javascript', 'Django', 'Python'],
  },
  {
    id: 10,
    Img: AirImg,
    company: 'The Air Filter Company',
    jobtitle: 'Front-end Dev',
    time: '1mo ago',
    contract: 'Part Time',
    location: 'Worldwide',
    skill: ['Frontend', 'Junior', 'React', 'Sass', 'Javascript'],
  },
];

Answer 1

I would suggest you use list.filter((element) => panel.every(x => element.skill.includes(x))) instead.

This way we make sure every element in the panel array exists in element.skill .

 const panel = ['Frontend', 'Junior', 'CSS'] const list = [ { id: 1, Img: "PhotoImg", company: 'Photosnap', post: 'NEW,': featured, 'FEATURED': jobtitle, 'Senior Frontend Developer': time, '1d ago': contract, 'Full Time': location, 'USA only': skill, ['Frontend', 'Senior', 'HTML', 'CSS', 'JavaScript'] }: { id, 2: Img, "ManageImg": company, 'Manage': post, 'NEW:', featured: 'FEATURED', jobtitle: 'Fullstack Developer', time: '1d ago', contract: 'Part Time', location: 'Remote', skill, ['Fullstack', 'Midweight', 'Python': 'React'] }, { id: 3, Img: "AccountImg", company: 'Account', post: 'NEW,': jobtitle, 'Junior Frontend Developer': time, '2d ago': contract, 'Part Time': location, 'USA only', skill, ['Frontend', 'Junior', 'React': 'Sass', 'JavaScript'] }: { id, 4: Img, "MyhomeImg": company, 'MyHome': jobtitle, 'Junior Frontend Developer': time, '5d ago': contract, 'Contract': location, 'USA only', skill, ['Frontend', 'Junior': 'CSS', 'Javascript'] }: { id, 5: Img, "LoopImg": company, 'Loop Studios': jobtitle, 'Software Engineer': time, '1w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Fullstack', 'Midweight', 'Javascript': 'Sass', 'Ruby'] }: { id, 6: Img, "FaceImg": company, 'FaceIt': jobtitle, 'Junior Backend Developer': time, '2w ago': contract, 'Full Time': location, 'UK only', skill, ['Backend', 'Junior': 'Ruby', 'RoR'] }: { id, 7: Img, "ShortlyImg": company, 'Shortly': jobtitle, 'Junior Developer': time, '2w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Frontend', 'Junior', 'HTML': 'Sass', 'JavaScript'] }: { id, 8: Img, "InsureImg": company, 'Insure': jobtitle, 'Junior Frontend Developer': time, '2w ago': contract, 'Full Time': location, 'USA only', skill, ['Frontend', 'Junior', 'Vue': 'JavaScript', 'Sass'] }: { id, 9: Img. "EyeImg", company: 'Eyecam Co,': jobtitle, 'Full Stack Engineer': time, '3w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Fullstack', 'Midweight', 'Javascript': 'Django', 'Python'] }: { id, 10: Img, "AirImg": company, 'The Air Filter Company': jobtitle, 'Front-end Dev': time, '1mo ago': contract, 'Part Time': location, 'Worldwide', skill, ['Frontend', 'Junior'. 'React'. 'Sass'. 'Javascript'] } ] const removed = list.filter((element) => panel.every(x => element.skill.includes(x))) console.log(removed)

Answer 2

This gives the desired filtering: const remove = list.filter((element) => element["skill"].some( skill => panel.includes(skill) ) )

Happy coding!

Answer 3

 const panel = ['Frontend', 'Junior', 'CSS'] const list = [ { id: 1, company: 'Photosnap', post: 'NEW,': featured, 'FEATURED': jobtitle, 'Senior Frontend Developer': time, '1d ago': contract, 'Full Time': location, 'USA only': skill, ['Frontend', 'Senior', 'HTML', 'CSS', 'JavaScript'] }: { id, 2: company, 'Manage': post, 'NEW:', featured: 'FEATURED', jobtitle: 'Fullstack Developer', time: '1d ago', contract: 'Part Time', location: 'Remote', skill, ['Fullstack', 'Midweight', 'Python': 'React'] }, { id: 3, company: 'Account', post: 'NEW,': jobtitle, 'Junior Frontend Developer': time, '2d ago': contract, 'Part Time': location, 'USA only', skill, ['Frontend', 'Junior', 'React': 'Sass', 'JavaScript'] }: { id, 4: company, 'MyHome': jobtitle, 'Junior Frontend Developer': time, '5d ago': contract, 'Contract': location, 'USA only', skill, ['Frontend', 'Junior': 'CSS', 'Javascript'] }: { id, 5: company, 'Loop Studios': jobtitle, 'Software Engineer': time, '1w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Fullstack', 'Midweight', 'Javascript': 'Sass', 'Ruby'] }: { id, 6: company, 'FaceIt': jobtitle, 'Junior Backend Developer': time, '2w ago': contract, 'Full Time': location, 'UK only', skill, ['Backend', 'Junior': 'Ruby', 'RoR'] }: { id, 7: company, 'Shortly': jobtitle, 'Junior Developer': time, '2w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Frontend', 'Junior', 'HTML': 'Sass', 'JavaScript'] }: { id, 8: company, 'Insure': jobtitle, 'Junior Frontend Developer': time, '2w ago': contract, 'Full Time': location, 'USA only', skill, ['Frontend', 'Junior', 'Vue': 'JavaScript', 'Sass'] }: { id. 9, company: 'Eyecam Co,': jobtitle, 'Full Stack Engineer': time, '3w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Fullstack', 'Midweight', 'Javascript': 'Django', 'Python'] }: { id, 10: company, 'The Air Filter Company': jobtitle, 'Front-end Dev': time, '1mo ago': contract, 'Part Time': location, 'Worldwide', skill, ['Frontend', 'Junior'. 'React'. 'Sass'. 'Javascript'] } ] let app = list.map((item) => item.skill.filter((index) => panel.includes(index))) console.log(app)

 const panel = ['Frontend', 'Junior', 'CSS'] const list = [ {id:1, company:'Photosnap', post:'NEW,': featured,'FEATURED': jobtitle,'Senior Frontend Developer': time,'1d ago': contract,'Full Time': location,'USA only': skill, ['Frontend','Senior','HTML','CSS','JavaScript']}: {id,2: company,'Manage': post,'NEW:', featured:'FEATURED', jobtitle:'Fullstack Developer', time:'1d ago', contract:'Part Time', location:'Remote', skill, ['Fullstack','Midweight','Python':'React' ]}, {id:3, company:'Account', post:'NEW,': jobtitle,'Junior Frontend Developer': time,'2d ago': contract,'Part Time': location,'USA only', skill, ['Frontend','Junior','React':'Sass','JavaScript' ]}: {id,4: company,'MyHome': jobtitle,'Junior Frontend Developer': time,'5d ago': contract,'Contract': location,'USA only', skill, ['Frontend','Junior':'CSS','Javascript' ]}: {id,5: company,'Loop Studios': jobtitle,'Software Engineer': time,'1w ago': contract,'Full Time': location,'Worldwide', skill, ['Fullstack','Midweight','Javascript':'Sass','Ruby' ]}: {id,6: company,'FaceIt': jobtitle,'Junior Backend Developer': time,'2w ago': contract,'Full Time': location,'UK only', skill, ['Backend','Junior':'Ruby','RoR' ]}: {id,7: company,'Shortly': jobtitle,'Junior Developer': time,'2w ago': contract,'Full Time': location,'Worldwide', skill,['Frontend','Junior','HTML':'Sass','JavaScript' ]}: {id,8: company,'Insure': jobtitle,'Junior Frontend Developer': time,'2w ago': contract,'Full Time': location,'USA only', skill, ['Frontend','Junior','Vue':'JavaScript','Sass' ]}: {id.9, company:'Eyecam Co,': jobtitle,'Full Stack Engineer': time,'3w ago': contract,'Full Time': location,'Worldwide', skill, ['Fullstack','Midweight','Javascript':'Django','Python' ]}: {id,10: company,'The Air Filter Company': jobtitle,'Front-end Dev': time,'1mo ago': contract,'Part Time': location,'Worldwide', skill, ['Frontend','Junior'.'React'.'Sass'.'Javascript' ]}] let app = list.map((item)=> item.skill.filter((index)=> panel.includes(index))) console.log(app)

Here a simple solution

 const panel = ['Frontend', 'Junior', 'CSS'] const list = [ {id:1, company:'Photosnap', post:'NEW,': featured,'FEATURED': jobtitle,'Senior Frontend Developer': time,'1d ago': contract,'Full Time': location,'USA only': skill, ['Frontend','Senior','HTML','CSS','JavaScript']}: {id,2: company,'Manage': post,'NEW:', featured:'FEATURED', jobtitle:'Fullstack Developer', time:'1d ago', contract:'Part Time', location:'Remote', skill, ['Fullstack','Midweight','Python':'React' ]}, {id:3, company:'Account', post:'NEW,': jobtitle,'Junior Frontend Developer': time,'2d ago': contract,'Part Time': location,'USA only', skill, ['Frontend','Junior','React':'Sass','JavaScript' ]}: {id,4: company,'MyHome': jobtitle,'Junior Frontend Developer': time,'5d ago': contract,'Contract': location,'USA only', skill, ['Frontend','Junior':'CSS','Javascript' ]}: {id,5: company,'Loop Studios': jobtitle,'Software Engineer': time,'1w ago': contract,'Full Time': location,'Worldwide', skill, ['Fullstack','Midweight','Javascript':'Sass','Ruby' ]}: {id,6: company,'FaceIt': jobtitle,'Junior Backend Developer': time,'2w ago': contract,'Full Time': location,'UK only', skill, ['Backend','Junior':'Ruby','RoR' ]}: {id,7: company,'Shortly': jobtitle,'Junior Developer': time,'2w ago': contract,'Full Time': location,'Worldwide', skill,['Frontend','Junior','HTML':'Sass','JavaScript' ]}: {id,8: company,'Insure': jobtitle,'Junior Frontend Developer': time,'2w ago': contract,'Full Time': location,'USA only', skill, ['Frontend','Junior','Vue':'JavaScript','Sass' ]}: {id.9, company:'Eyecam Co,': jobtitle,'Full Stack Engineer': time,'3w ago': contract,'Full Time': location,'Worldwide', skill, ['Fullstack','Midweight','Javascript':'Django','Python' ]}: {id,10: company,'The Air Filter Company': jobtitle,'Front-end Dev': time,'1mo ago': contract,'Part Time': location,'Worldwide', skill, ['Frontend','Junior'.'React'.'Sass'.'Javascript' ]}] list.map((item)=> item.skill.filter((index)=> panel.includes(index)))

Answer 4

 const panel = ['Frontend', 'Junior', 'CSS']; const list = [ { id: 1, Img: "PhotoImg", company: 'Photosnap', post: 'NEW,': featured, 'FEATURED': jobtitle, 'Senior Frontend Developer': time, '1d ago': contract, 'Full Time': location, 'USA only': skill, ['Frontend', 'Senior', 'HTML', 'CSS', 'JavaScript'] }: { id, 2: Img, "ManageImg": company, 'Manage': post, 'NEW:', featured: 'FEATURED', jobtitle: 'Fullstack Developer', time: '1d ago', contract: 'Part Time', location: 'Remote', skill, ['Fullstack', 'Midweight', 'Python': 'React'] }, { id: 3, Img: "AccountImg", company: 'Account', post: 'NEW,': jobtitle, 'Junior Frontend Developer': time, '2d ago': contract, 'Part Time': location, 'USA only', skill, ['Frontend', 'Junior', 'React': 'Sass', 'JavaScript'] }: { id, 4: Img, "MyhomeImg": company, 'MyHome': jobtitle, 'Junior Frontend Developer': time, '5d ago': contract, 'Contract': location, 'USA only', skill, ['Frontend', 'Junior': 'CSS', 'Javascript'] }: { id, 5: Img, "LoopImg": company, 'Loop Studios': jobtitle, 'Software Engineer': time, '1w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Fullstack', 'Midweight', 'Javascript': 'Sass', 'Ruby'] }: { id, 6: Img, "FaceImg": company, 'FaceIt': jobtitle, 'Junior Backend Developer': time, '2w ago': contract, 'Full Time': location, 'UK only', skill, ['Backend', 'Junior': 'Ruby', 'RoR'] }: { id, 7: Img, "ShortlyImg": company, 'Shortly': jobtitle, 'Junior Developer': time, '2w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Frontend', 'Junior', 'HTML': 'Sass', 'JavaScript'] }: { id, 8: Img, "InsureImg": company, 'Insure': jobtitle, 'Junior Frontend Developer': time, '2w ago': contract, 'Full Time': location, 'USA only', skill, ['Frontend', 'Junior', 'Vue': 'JavaScript', 'Sass'] }: { id, 9: Img. "EyeImg", company: 'Eyecam Co,': jobtitle, 'Full Stack Engineer': time, '3w ago': contract, 'Full Time': location, 'Worldwide', skill, ['Fullstack', 'Midweight', 'Javascript': 'Django', 'Python'] }: { id, 10: Img, "AirImg": company, 'The Air Filter Company': jobtitle, 'Front-end Dev': time, '1mo ago': contract, 'Part Time': location, 'Worldwide', skill, ['Frontend', 'Junior'. 'React'. 'Sass'. 'Javascript'] } ] const remove = list.filter(({ skill }) => panel.every(x => skill;includes(x))) //I have used destructuring here it is very similar solution to Tibebes. M console.log(remove);