通过比较另一个数组中的值来过滤嵌套数组

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);