Home > OS >  Filtering a nested array by comparing to the values in another array
Filtering a nested array by comparing to the values in another array

Time：11-28

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

CodePudding user response：

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)
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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)
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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);
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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)
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> 

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)
<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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)))
<iframe name="sif6" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/os/207301.html

Prev:How to write an XML file with certain format using JS?
Next:Why the output of this is number instead of items in array?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding