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'],
  },
];

Tibebes. M · Accepted Answer · 2021-11-27 14:38:30Z

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)

Thanks very much, worked like magic!! .every was the missing piece.
@KiranM Glad to help. consider marking it as "the accepted answer".

Nimantha · Accepted Answer · 2021-11-27 15:45:57Z

This gives the desired filtering:

const remove = list.filter((element) => element.skill.some( skill => panel.includes(skill) ) )

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 panel = ['Frontend', 'Junior', 'CSS'];

const removed = list.filter((element) => element["skill"].some( skill => panel.includes(skill) ) )

console.log(removed)

Bhargav Mantha · Accepted Answer · 2021-11-27 14:56:46Z

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

Zaw Zaw Win · Accepted Answer · 2021-11-27 15:15:22Z

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

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Here a simple solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Here a simple solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related