reactjs - 使用地图将数据与数组合并答案

【问题标题】：reactjs - Merge data with array using mapreactjs - 使用地图将数据与数组合并
【发布时间】：2018-02-19 05:47:53
【问题描述】：

React js 新手在这里。我真的可以在以下问题上使用一些帮助和指导。首先，我有 db.json，其中包括：

{
    "applicants": [{
        "id": 1,
        "firstName": "John",
        "lastName": "Doe",
        "email": "john.doe@example.com",
        "coverLetter": "Aliquam ut nunc eu augue volutpat porta ullamcorper."
    }, {
        "id": 2,
        "firstName": "Erica",
        "lastName": "Hayfied",
        "email": "erica@example.com",
        "coverLetter": "Pellentesque habitant morbi tristique senectus."
   }],
    "skills": [{
        "id": 1,
        "description": "PHP",
        "experienceInYears": 3,
        "applicantId": 1
    }, {
        "id": 2,
        "description": "JavaScript",
        "experienceInYears": 3,
        "applicantId": 1
    }]
}

目前，下面的实现返回一个具有空技能集的申请人列表。我需要它来返回申请人及其相关技能的列表。

import { defaultMemoize, createSelector } from 'reselect';
import { get, filter, map, sortBy, } from 'lodash';

const getApplicants = createSelector(getApplicantIds, getApplicantsById,
                          (orderedIds, applicantsById) => map(orderedIds, id => applicantsById[id]));

* TODO: Actually merge related skills from the `state.skill` slice.
* @return {array} collection of applicants with their related skills included as a property.
*/
const getApplicantsWithSkills = createSelector(getApplicants,
                                    applicants => {
             const asApplicantWithSkills = applicant => ({
                                               ...applicant,
                                               skills:[]
                                           });
             return map(applicants, asApplicantWithSkills);
});

我确信这是一个简单的解决方案，但我现在被卡住了，可能想多了。 Expected output

【问题讨论】：

请分享预期的输出

标签： javascript json reactjs react-native lodash

【解决方案1】：

你可以在applicant数组上map，在applicantId === id的条件下，在每个数组里面和filterdata.skills。这将为您提供一个匹配数组，如果没有匹配，则为您提供一个空数组。

为了清楚起见，此输出将整个技能对象放入数组中。您可以根据需要修改放入该数组的内容。

const data = {
 "applicants": [{
  "id": 1,
  "firstName": "John",
  "lastName": "Doe",
  "email": "john.doe@example.com",
  "coverLetter": "Aliquam ut nunc eu augue volutpat porta ullamcorper."
  }, {
  "id": 2,
  "firstName": "Erica",
  "lastName": "Hayfied",
  "email": "erica@example.com",
  "coverLetter": "Pellentesque habitant morbi tristique senectus."
}],
 "skills": [{
  "id": 1,
  "description": "PHP",
  "experienceInYears": 3,
  "applicantId": 1
 }, {
  "id": 2,
  "description": "JavaScript",
  "experienceInYears": 3,
  "applicantId": 1
 }]
}
const applicantData = data.applicants.map(userObj => {
  let applicantSkillObjects = data.skills.filter(skillObj => {
    return skillObj.applicantId === userObj.id
  })
  return {...userObj, skills: applicantSkillObjects}
})

console.log(applicantData)

【讨论】：

【解决方案2】：

工作演示

var jsonObj = {
 "applicants": [{
  "id": 1,
  "firstName": "John",
  "lastName": "Doe",
  "email": "john.doe@example.com",
  "coverLetter": "Aliquam ut nunc eu augue volutpat porta ullamcorper."
  }, {
  "id": 2,
  "firstName": "Erica",
  "lastName": "Hayfied",
  "email": "erica@example.com",
  "coverLetter": "Pellentesque habitant morbi tristique senectus."
}],
 "skills": [{
  "id": 1,
  "description": "PHP",
  "experienceInYears": 3,
  "applicantId": 1
 }, {
  "id": 2,
  "description": "JavaScript",
  "experienceInYears": 3,
  "applicantId": 1
 }]
 };
 
let res = jsonObj.applicants.map(userDetails => {
   let skillArr = jsonObj.skills.filter(skillDetails => {
    return userDetails.id === skillDetails.applicantId
  })
  return { user: userDetails.firstName + ' ' + userDetails.firstName, skills: skillArr.map(item => item.description).join()}  
 });
 
console.log(res);

【讨论】：