Fatal编程技术网
  • javascript/
  • 如何有效地将JavaScript对象的值分离到数组中？

如何有效地将JavaScript对象的值分离到数组中？

javascript reactjs

如何有效地将JavaScript对象的值分离到数组中？,javascript,reactjs,react-select,Javascript,Reactjs,React Select,我有以下JSON数据 data=[ { _id: "5b377db0c97f730014b6eb12", title: "Integrated Compute Platform - Operations Lead", applylink: "https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221", jd: "

我有以下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.5MB来自在线托管的JSON文件，这只是一个示例，我必须根据位置、技能和经验筛选工作

我想到的是将所有内容添加到状态，然后使用以下格式预处理3diff数组中的数据

      {
        value: jobData.xxx,
        label: jobData.xxx
      }
在react select中推送数据，从中获取数据，对整个状态使用过滤器，并在一个漂亮的UI中显示结果

这里的问题是数据非常庞大，而且没有从后端获取数据块的选项，我必须立即使用完整的数据

我的问题是：-

  • 如何在没有重复元素的情况下在diff数组中存储数据技能、位置和exp隔离，我尝试了一个map，重复元素就来了。再次遍历整个数组以检查它是否不存在，这样做效率不高吗
  • 你们有没有更好的办法
谢谢

编辑-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;

从“React”导入React；
从“/Landing.module.scss”导入样式；
从“/2663543.jpg”导入JobImage；
从“反应选择”导入选择；
类LandingPage扩展了React.Component{
状态={
数据：[
//上述数据
],
技能：[]，
地点：[]，
经验：[]
};
componentDidMount（）{
var skillList=[]；
var locationList=[]；
var experienceList=[]；
this.state.data.map（jobData=>{
变量技能={
价值：jobData.skills，
标签：jobData.skills
};
变量位置={
值：jobData.location，
标签：jobData.location
};
风险值经验={
价值：jobData.experience，
标签：jobData.experience
};
});
}
render（）{
返回(
);
}
}
导出默认登陆页面；
这是一种方法

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=[{u id:“5B377DB0C97F7300014B6EB12”，标题：“集成计算平台-运营主管”，应用链接：https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221，jd:，公司名称：“JP摩根大通银行”，地点：“海得拉巴/赛肯德拉巴”，经验：“5-7年”，工资：，类型：，技能：“思科”，startdate:，enddate:，created:，source:“techgig”，时间戳：1530363306.1030896，{u v:0}，{u id:“5B377DB0C97F7300014B6EB13”，标题：“角度ui/ux”，applylink:“https://www.techgig.com/jobs/angular-ui-ux/60213，jd:，公司名称：“凯捷”，地点：“浦那”，经验：“6-9年”，薪水：，类型：，技能：“用户界面/用户体验”，startdate:，enddate:，created:，source:“techgig”，时间戳：1530363306.1030896，{u v:0}，{u id:“5B377DB0C97F7300014B6EB14”，标题：“BCM-大数据CoE领导”，applylink:“https://www.techgig.com/jobs/BCM-Big-Data-CoE-Lead/60226，jd:，公司名称：“凯捷”，地点：“浦那”，工作经历：“17-20年”，工资：，类型：“，技能：“大数据”，开始日期：，结束日期：，创建日期：，来源：“techgig”，时间戳：1530363306.1030896，{u v:0}，{u id:“5B377DB0C97F7300014B6EB15”，标题：“开放VisaNet的员工质量保证工程师”，应用链接：https://www.techgig.com/jobs/Staff-QA-Engineer-Open-VisaNet/60218，jd:，公司名称：“Visa”，地址：“班加罗尔/班加罗尔”，工作经历：“7-12年”，薪水：，类型：，技能：“Erlang”，开始日期：，结束日期：，创建日期：，来源：“techgig”，时间戳：1530363306.1030896，u v:0}，{uID:“5B377DB0C97F73014B6EB16”，标题：“Hadoop-大数据开发人员”，applylink:“https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225，jd:，公司名称：“摩根士丹利”，地点：“孟买”，经历：“4-7年”，薪水：，类型：，技能：“大数据”，起始日期：，结束日期：，创建日期：，来源：“techgig”，时间戳：1530363306.1030896，u v:0}，{id:“5B377DB0C97F73014B6EB17”，标题：“UX/UI设计师专家”，applylink:https://www.techgig.com/jobs/Specialist-UX-UI-Designer/60215“，jd:”，公司名称：“Hewlett-Packard”，地点：“Bengaluru/Bangalore”，经历：“5-9年”，薪水：“，类型：”，技能：“用户界面/用户体验”，起始日期：“，结束日期：”，创建：“，来源：“techgig”，时间戳：1530363306.1030896，u v:0}，{id:“5B377DB0C97F73014B18”，标题：“Hadoop-大数据开发者”，applylink:"https://www.techgig.com/jobs/Hadoop-Big-Data-Developer/60225，jd:，公司名称：“摩根士丹利”，地点：“孟买”，经历：“4-7年”，薪水：，类型：，技能：“大数据”，起始日期：，结束日期：，创建日期：，来源：“techgig”，时间戳：1530363306.1030896，u v:0}；
让skillsList=[…新集合（data.map（（{skills}）=>skills））].map（value=>（{value，label:value}））；
让locationList=[…新集合（data.map（（{location}）=>location））].map（value=>（{value，label:value}））；
让experienceList=[…新集合（data.map（{experience}=>experience））].map（value=>（{value，label:value}））；
控制台日志（skillsList）；
控制台日志（位置列表）；

console.log（locationList）；
这是一种方法

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=[{u id:“5B377DB0C97F7300014B6EB12”，标题：“集成计算平台-运营主管”，应用链接：https://www.techgig.com/jobs/Integrated-Compute-Platform-Operations-Lead/60221，jd:，公司名称：“JP摩根大通银行”，地点：“海得拉巴/赛肯德拉巴”，经验：“5-7年”，工资：，类型：，技能：“思科，startdate:，enddate:，created:，source:“techgig”，时间戳：1530363306.1030896，{u v:0}，{u id:“5B377DB0C97F7300014B6EB13”，标题：“角度ui/ux”，applylink:“https://www.techgig.com/jobs/angular-ui-ux/60213，jd:，公司名称：“凯捷”，地点：“浦那”，经验：“6-9年”，薪水：，类型：，技能：“用户界面/用户体验”，起始日期：