reactjs - 使用map

Question

在这里反应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

Answer 1

您可map在applicant数组上，filter数组内，data.skills applicantId === id 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) CREATE TABLE Product ( ProductID INTEGER, ProdName VARCHAR(50), Category VARCHAR(20), SupplierID CHAR(1), HourlyRate DECIMAL(5,2), UnitsInStock CHAR(2), CONSTRAINT PKProduct PRIMARY KEY (ProductID), CONSTRAINT FKSupplier FOREIGN KEY (SupplierID) REFERENCES Supplier(SupplierID) ); 这将为您提供一系列匹配，如果没有匹配则为空数组。

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

＆＃13;

＆＃13;

Xpath -- //aside[@id='left-panel']/nav/ul/li[2]/a/span

＆＃13;

＆＃13;

＆＃13;

Answer 2

工作演示

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;