CODEWITHSUNDEEP
javascriptarrays
KiranM
KiranM

Reputation: 35

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

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

Upvotes: 1

Views: 413

Answers (4)

Myrer
Myrer

Reputation: 56

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)

Upvotes: 1

Zaw Zaw Win
Zaw Zaw Win

Reputation: 73

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

Upvotes: 0

Bhargav Mantha
Bhargav Mantha

Reputation: 151

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

Upvotes: 0

Tibebes. M
Tibebes. M

Reputation: 7548

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)

Upvotes: 1

Related Questions