如何用数组过滤对象数组

何韵诗

我了解与此有关的堆栈中已经有很多类似的问题,但是我似乎无法解决我的问题。我正在寻找一个对象与另一个数组的条件过滤一个数组。

const jobPost = [
    {
        id: 1,
        companyName: "Photosnap",
        jobTitle: "Senior Frontend Developer",
        companyLogo: "./photosnap.svg",
        skills: ["Frontend", "Senior", "HTML", "CSS", "JavaScript"],
        new: true,
        featured: true,
        dayOfPost: "1d ago",
        contract: "Full Time",
        region: "USA only"
    },
    {
        id: 2,
        companyName: "Manage",
        jobTitle: "Fullstack Developer",
        companyLogo: "./manage.svg",
        skills: ["Fullstack", "Midweight", "Python", "React"],
        new: true,
        featured: true,
        dayOfPost: "1d ago",
        contract: "Part Time",
        region: "Remote"
    },
    {
        id: 3,
        companyName: "Account",
        jobTitle: "Junior Frontend Developer",
        companyLogo: "./account.svg",
        skills: ["Frontend", "Junior", "React", "Sass", "JavaScript"],
        new: true,
        featured: false,
        dayOfPost: "2d ago",
        contract: "Part Time",
        region: "USA only"
    },
    {
        id: 4,
        companyName: "MyHome",
        jobTitle: "Junior Frontend Developer",
        companyLogo: "./myhome.svg",
        skills: ["Frontend", "Junior", "CSS", "JavaScript"],
        new: false,
        featured: false,
        dayOfPost: "5d ago",
        contract: "Contract",
        region: "USA only"
    },
    {
        id: 5,
        companyName: "Loop Studios",
        jobTitle: "Software Engineer",
        companyLogo: "./loop-studios.svg",
        skills: ["Fullstack", "Midweight", "JavaScript", "Sass", "Ruby"],
        new: false,
        featured: false,
        dayOfPost: "5d ago",
        contract: "Full Time",
        region: "Worldwide"
    },
    {
        id: 6,
        companyName: "FaceIt",
        jobTitle: "Junior Backend Developer",
        companyLogo: "./faceit.svg",
        skills: ["Backend", "Junior", "Ruby", "RoR"],
        new: false,
        featured: false,
        dayOfPost: "2w ago",
        contract: "Full Time",
        region: "UK only"
    },
    {
        id: 7,
        companyName: "Shortly",
        jobTitle: "Junior Developer",
        companyLogo: "./shortly.svg",
        skills: ["Frontend", "Junior", "HTML", "Sass", "JavaScript"],
        new: false,
        featured: false,
        dayOfPost: "2w ago",
        contract: "Full Time",
        region: "Worldwide"
    },
    {
        id: 8,
        companyName: "Insure",
        jobTitle: "Junior Frontend Developer",
        companyLogo: "./insure.svg",
        skills: ["Frontend", "Junior", "Vue", "JavaScript", "Sass" ],
        new: false,
        featured: false,
        dayOfPost: "2w ago",
        contract: "Full Time",
        region: "USA only"
    },
    {
        id: 9,
        companyName: "Eyecam Co.",
        jobTitle: "Full Stack Engineer",
        companyLogo: "./eyecam-co.svg",
        skills: ["Fullstack", "Midweight", "JavaScript", "Django", "Python" ],
        new: false,
        featured: false,
        dayOfPost: "3w ago",
        contract: "Full Time",
        region: "Worldwide"
    },
    {
        id: 10,
        companyName: "The Air Filter Company",
        jobTitle: "Front-end Dev",
        companyLogo: "./the-air-filter-company.svg",
        skills: ["Frontend", "Junior", "React", "Sass", "JavaScript" ],
        new: false,
        featured: false,
        dayOfPost: "1m ago",
        contract: "Part Time",
        region: "Worldwide"
    }
    
]

export default jobPost;

Jobpost数组保存在一个名为jobDB.js的单独文件中,并通过导入导入到我的app.js中。

import jobDB from "./components/modules/jobDB";



const App = () =>{
const [searchTerms, setSearchTerms] = useState([]); 

const checkCriteria = (data) =>{
   searchTerms.some(term => {
   return data.skills.includes(term);
 })
}

const onClick = (e) => {
    const {textContent} = e.target;
    if (!searchTerms.includes(textContent)){
      setSearchTerms([...searchTerms, textContent])
    }
};

return (
  {searchTerms.length > 0? jobDB.filter(checkCriteria).map(createPost) : 
  jobDB.map(createPost)}
 )

}

从用户界面单击后,会更新searchTerm数组,但过滤后的数组始终返回空。

请帮忙!我一直在盯着这个问题近24个小时。

东汉

您忘记返回过滤器功能的实际结果

const checkCriteria = (data) => {
   return searchTerms.some(term => {
     return data.skills.includes(term);
   })
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何用数组过滤对象

来自分类Dev

如何用数组过滤对象

来自分类Dev

从对象数组过滤

来自分类Dev

如何按角色数组过滤对象?

来自分类Dev

按键数组过滤对象

来自分类Dev

按数组过滤对象

来自分类Dev

按键数组过滤对象

来自分类Dev

如何按动态对象数组过滤数组?

来自分类Dev

如何使用一些数组过滤对象?

来自分类Dev

将对象数组过滤为对象

来自分类Dev

如何用对象过滤objecs数组

来自分类Dev

如何用另一个数组过滤数组

来自分类Dev

使用平面数组过滤JSON对象

来自分类Dev

Mongo按对象数组过滤文档

来自分类Dev

使用平面数组过滤JSON对象

来自分类Dev

对象数组过滤 angular2

来自分类Dev

按 id 数组过滤对象

来自分类Dev

基于对象属性的数组过滤

来自分类Dev

用子数组过滤对象

来自分类Dev

如何基于其他数组使用嵌套数组过滤对象数组

来自分类Dev

如何通过另一个对象数组过滤对象数组[ES6]

来自分类Dev

lodash:使用不同的对象数组过滤对象数组

来自分类Dev

将嵌套的对象数组过滤为对象数组

来自分类Dev

通过嵌套的对象值数组过滤对象数组

来自分类Dev

根据其他对象数组过滤对象数组

来自分类Dev

根据对象数组过滤对象数组返回相同的结果

来自分类Dev

基于数组过滤对象的属性。并获取过滤后的对象

来自分类Dev

如何使用NSPredicates数组过滤NSArray?

来自分类Dev

AngularJS:如何给值数组过滤