javascript - 如何有效地将 JavaScript 对象的值分离到 Array 中？
问题描述
我有以下 JSON 数据；
data=[
{
_id: "5b377db0c97f730014b6eb12",
title: "Integrated Compute Platform - Operations Lead",
applylink:
"https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221",
jd: "",
companyname: "JP Morgan Chase Bank",
location: "Hyderabad/Secunderabad",
experience: "5-7 yrs",
salary: "",
type: "",
skills: "Cisco",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb13",
title: "angular-ui/ux",
applylink: "https://www.techgig.com/jobs/angular-ui-ux/60213",
jd: "",
companyname: "Capgemini",
location: "Pune",
experience: "6-9 yrs",
salary: "",
type: "",
skills: "UI / UX",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb14",
title: "BCM - Big Data CoE Lead",
applylink: "https://www.techgig.com/jobs/BCM-Big-Data-CoE-Lead/60226",
jd: "",
companyname: "Capgemini",
location: "Pune",
experience: "17-20 yrs",
salary: "",
type: "",
skills: "Big Data",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb15",
title: "Staff QA Engineer, Open VisaNet",
applylink:
"https://www.techgig.com/jobs/Staff-QA-Engineer-Open-VisaNet/60218",
jd: "",
companyname: "Visa",
location: "Bengaluru/Bangalore",
experience: "7-12 yrs",
salary: "",
type: "",
skills: "Erlang",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb16",
title: "Hadoop - Big Data Developer",
applylink:
"https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225",
jd: "",
companyname: "Morgan Stanley",
location: "Mumbai",
experience: "4-7 yrs",
salary: "",
type: "",
skills: "Big Data",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb17",
title: "Specialist UX/UI Designer",
applylink:
"https://www.techgig.com/jobs/Specialist-UX-UI-Designer/60215",
jd: "",
companyname: "Hewlett Packard",
location: "Bengaluru/Bangalore",
experience: "5-9 yrs",
salary: "",
type: "",
skills: "UI / UX",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
},
{
_id: "5b377db0c97f730014b6eb18",
title: "Hadoop - Big Data Developer",
applylink:
"https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225",
jd: "",
companyname: "Morgan Stanley",
location: "Mumbai",
experience: "4-7 yrs",
salary: "",
type: "",
skills: "Big Data",
startdate: "",
enddate: "",
created: "",
source: "techgig",
timestamp: 1530363306.1030896,
__v: 0
}]
数据远不止这些，大约 1.5 MB 来自在线托管的 JSON 文件，这只是示例，我必须根据位置、技能和经验来筛选工作。
我想将所有内容添加到状态然后使用以下格式预处理 3 diff 数组中的数据
{
value: jobData.xxx,
label: jobData.xxx
}
在 react-select 中推送数据，从中获取数据并使用过滤器来处理整个状态，并在漂亮的 UI 中显示结果。
这里的问题是数据真的很大，并且没有从后端获取块的选项，我必须一次使用完整的数据。
我的问题是：-
- 如何在没有重复元素的情况下将数据技能、位置和 exp 隔离在 diff 数组中，我尝试使用地图，重复元素即将到来。再次遍历整个数组以检查它是否不存在不会有效吗？
- 有没有更好的方法你们都建议这样做？
谢谢
编辑-1
所以基本上我想要3个json对象
var skill = {
value: jobData.skills,
label: jobData.skills
};
var location = {
value: jobData.location,
label: jobData.location
};
var experience = {
value: jobData.experience,
label: jobData.experience
};
推入三个数组：
var skillList=[];
var locationList=[];
var experienceList=[];
这将反过来设置为反应状态
编辑-2
这是整个代码：
import React from "react";
import Style from "./Landing.module.scss";
import JobImage from "./2663543.jpg";
import Select from "react-select";
class LandingPage extends React.Component {
state = {
data: [
//the data mentiond above
],
skills: [],
location: [],
experience: []
};
componentDidMount() {
var skillList=[];
var locationList=[];
var experienceList=[];
this.state.data.map(jobData => {
var skill = {
value: jobData.skills,
label: jobData.skills
};
var location = {
value: jobData.location,
label: jobData.location
};
var experience = {
value: jobData.experience,
label: jobData.experience
};
});
}
render() {
return (
<>
<div className={Style.bigHead}>
<div className={Style.bigImage}>
<img src={JobImage} alt="Job Image"></img>
</div>
<div className={Style.filters}>
<Select
isMulti
name="location"
options={this.state.location}
className="basic-multi-select"
classNamePrefix="select"
/>
<Select
isMulti
name="experience"
options={this.state.experience}
className="basic-multi-select"
classNamePrefix="select"
/>
<Select
isMulti
name="skill"
options={this.state.skills}
className="basic-multi-select"
classNamePrefix="select"
/>
</div>
</div>
</>
);
}
}
export default LandingPage;
解决方案
这是一种方法
let skillsList = [...new Set(data.map(({skills}) => skills))].map(value => ({value, label:value}));
let locationList = [...new Set(data.map(({location}) => location))].map(value => ({value, label:value}));
let experienceList = [...new Set(data.map(({experience}) => experience))].map(value => ({value, label:value}));
let data=[{ _id: "5b377db0c97f730014b6eb12", title: "Integrated Compute Platform - Operations Lead", applylink: "https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221", jd: "", companyname: "JP Morgan Chase Bank", location: "Hyderabad/Secunderabad", experience: "5-7 yrs", salary: "", type: "", skills: "Cisco", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb13", title: "angular-ui/ux", applylink: "https://www.techgig.com/jobs/angular-ui-ux/60213", jd: "", companyname: "Capgemini", location: "Pune", experience: "6-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb14", title: "BCM - Big Data CoE Lead", applylink: "https://www.techgig.com/jobs/BCM-Big-Data-CoE-Lead/60226", jd: "", companyname: "Capgemini", location: "Pune", experience: "17-20 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb15", title: "Staff QA Engineer, Open VisaNet", applylink: "https://www.techgig.com/jobs/Staff-QA-Engineer-Open-VisaNet/60218", jd: "", companyname: "Visa", location: "Bengaluru/Bangalore", experience: "7-12 yrs", salary: "", type: "", skills: "Erlang", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb16", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb17", title: "Specialist UX/UI Designer", applylink: "https://www.techgig.com/jobs/Specialist-UX-UI-Designer/60215", jd: "", companyname: "Hewlett Packard", location: "Bengaluru/Bangalore", experience: "5-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb18", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }];
let skillsList = [...new Set(data.map(({skills}) => skills))].map(value => ({value, label:value}));
let locationList = [...new Set(data.map(({location}) => location))].map(value => ({value, label:value}));
let experienceList = [...new Set(data.map(({experience}) => experience))].map(value => ({value, label:value}));
console.log(skillsList);
console.log(locationList);
console.log(locationList);另一种方式，我不知道它可能会或可能不会更高效，但它会迭代数据一次，而不是 3 次
let data=[{ _id: "5b377db0c97f730014b6eb12", title: "Integrated Compute Platform - Operations Lead", applylink: "https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221", jd: "", companyname: "JP Morgan Chase Bank", location: "Hyderabad/Secunderabad", experience: "5-7 yrs", salary: "", type: "", skills: "Cisco", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb13", title: "angular-ui/ux", applylink: "https://www.techgig.com/jobs/angular-ui-ux/60213", jd: "", companyname: "Capgemini", location: "Pune", experience: "6-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb14", title: "BCM - Big Data CoE Lead", applylink: "https://www.techgig.com/jobs/BCM-Big-Data-CoE-Lead/60226", jd: "", companyname: "Capgemini", location: "Pune", experience: "17-20 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb15", title: "Staff QA Engineer, Open VisaNet", applylink: "https://www.techgig.com/jobs/Staff-QA-Engineer-Open-VisaNet/60218", jd: "", companyname: "Visa", location: "Bengaluru/Bangalore", experience: "7-12 yrs", salary: "", type: "", skills: "Erlang", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb16", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb17", title: "Specialist UX/UI Designer", applylink: "https://www.techgig.com/jobs/Specialist-UX-UI-Designer/60215", jd: "", companyname: "Hewlett Packard", location: "Bengaluru/Bangalore", experience: "5-9 yrs", salary: "", type: "", skills: "UI / UX", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }, { _id: "5b377db0c97f730014b6eb18", title: "Hadoop - Big Data Developer", applylink: "https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225", jd: "", companyname: "Morgan Stanley", location: "Mumbai", experience: "4-7 yrs", salary: "", type: "", skills: "Big Data", startdate: "", enddate: "", created: "", source: "techgig", timestamp: 1530363306.1030896, __v: 0 }];
let {skillsList, locationList, experienceList} = data.reduce((acc, {skills, location, experience}) => {
acc.skillsList.add(skills);
acc.locationList.add(location);
acc.experienceList.add(experience);
return acc;
}, {skillsList:new Set, locationList:new Set, experienceList:new Set});
skillsList = [...skillsList].map(value => ({value, label:value}));
locationList = [...locationList].map(value => ({value, label:value}));
experienceList = [...experienceList].map(value => ({value, label:value}));
console.log(skillsList);
console.log(locationList);
console.log(experienceList);推荐阅读
- angular - 使用Angular在Ionic 5中路由用户时如何刷新页面
- google-chrome - 我是否需要先发布 chrome 扩展才能测试许可证？
- python - 如何在 python unittest 中模拟未在本地安装的库？
- postgresql - 安装后无法连接到 PostgreSQL 12 服务器
- java - 更新 Kotlin 后主要活动未启动
- button - Xamarin Forms Transalted 按钮单击
- common-lisp - Stack Overflow on lisp 更改列表中的 2 个元素
- google-cloud-dataflow - 在流式传输管道中使用谷歌云发布/订阅服务有什么好处
- html - Angular Material Stepper：设置活动页眉的样式
- c# - 如何使用 C# 可靠地读取串行端口的 CTS 和 DSR 状态