Reactjs- 使用 props 映射和过滤 JSON 数据

Question

我遇到了一个不应该让我陷入困境的问题。无法弄清楚如何完成这项工作......

我有一个如下所示的 db.json：

{
   "applicants": [{
     "id": 1,
     "firstName": "John",
     "lastName": "Doe",
     "email": "john.doe@example.com",
     "coverLetter": "Aliquam ut nunc eu augue volutpat porta ullamcorper sed."
  }, {
     "id": 2,
     "firstName": "Erica",
     "lastName": "Hayfied",
     "email": "erica@example.com",
     "coverLetter": "Pellentesque habitant morbi tristique senectus."
  }, {
     "id": 3,
     "firstName": "Lex",
     "lastName": "Luther",
     "email": "lex@example.com",
     "coverLetter": "Phasellus fermentum, neque nec posuere hendrerit."
  }, {
     "id": 4,
     "firstName": "Bruce",
     "lastName": "Wayne",
     "email": "bruce@example.com",
     "coverLetter": "Vestibulum varius purus non convallis ultricies."
  }, {
     "id": 5,
     "firstName": "Peter",
     "lastName": "Parker",
     "email": "peter@example.com",
     "coverLetter": "Aenean faucibus augue id justo viverra, eget."
  }, {
     "id": 6,
     "firstName": "Diana",
     "lastName": "Prince",
     "email": "diana@prince.com",
     "coverLetter": "Nam dolor urna, imperdiet ac ipsum quis, aliquet laoreet."
  }],

    "skills": [{
     "id": 1,
     "description": "PHP",
     "experienceInYears": 3,
     "applicantId": 1
  }, {
     "id": 2,
     "description": "JavaScript",
     "experienceInYears": 3,
     "applicantId": 1
  }, {
     "id": 3,
     "description": "Objective-C",
     "experienceInYears": 10,
     "applicantId": 1
  }, {
     "id": 4,
     "description": "Objective-C",
     "experienceInYears": "3 Years",
     "applicantId": 2
  }, {
     "id": 5,
     "description": "Karate",
     "experienceInYears": 20,
     "applicantId": 2
  }, {
     "id": 6,
     "description": "Ruby",
     "experienceInYears": 20,
     "applicantId": 4
  }, {
     "id": 7,
     "description": "Apothecary",
     "experienceInYears": 15,
     "applicantId": 4
  }, {
     "id": 8,
     "description": "Speak German",
     "experienceInYears": 5,
     "applicantId": 4
  }, {
     "id": 9,
     "description": "Swim",
     "experienceInYears": 5,
     "applicantId": 4
  }, {
     "id": 10,
     "description": "Run",
     "experienceInYears": 5,
     "applicantId": 4
  },  {
     "id": 11,
     "description": "Writer",
     "experienceInYears": 5,
     "applicantId": 4
  }, {
     "id": 12,
     "description": "Fighting Crime",
     "experienceInYears": 33,
     "applicantId": 4
  }, {
     "id": 13,
     "description": "Weaving Webs",
     "experienceInYears": 3,
     "applicantId": 5
  }, {
     "id": 14,
     "description": "Spidey Senses",
     "experienceInYears": 3,
     "applicantId": 5
  }, {
     "id": 15,
     "description": "Olympic Lifting",
     "experienceInYears": 3,
     "applicantId": 6
  }]
}

认为申请人的最高技能是拥有最多年经验的技能。

例如，如果 Bob 有 3 年的 PHP 经验和 5 年的 Objective-C 经验，那么 Bob 的最高技能是 Objective-C。

我想在卡体内的申请人列表中显示每个申请人的顶级技能。 Like this。更具体地说，在申请者行组件中使用道具。

这是组件结构：

ApplicantRow.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { get } from 'lodash';

import { Card, CardBody, CardFooter } from '../card';

class ApplicantRow extends Component {
 render() {
  return (
   <Card>
    <CardBody>
      <Text style={styles.name}>
        {this.props.applicant.firstName} {}
        {this.props.applicant.lastName}
      </Text>

      <Text style={styles.coverLetter}>
        {this.props.applicant.coverLetter}
      </Text>
    </CardBody>
    <CardFooter style={styles.row}>
      <View style={styles.col}>
        <Text style={styles.label}>SKILL COUNT</Text>
        <Text style={styles.skill}>
          {get(this.props.applicant, 'skills.length', 0)}
        </Text>
      </View>

      <View style={styles.col}>
        <Text style={styles.label}>TOP SKILL</Text>
        <Text style={styles.skill}>
          {/* TOP SKILL SHOULD BE SHOWN HERE */}
        </Text>
      </View>

    </CardFooter>
  </Card>
  );
 }
}

export { ApplicantRow as default };

ApplicantsList.js

import React, { Component, PropTypes } from 'react';
import { ActivityIndicator, Button, ListView, StyleSheet, Text, View } from 'react-native';

import { Card, CardBody, CardFooter, CardHeader } from '../card';
import ApplicantRow from './ApplicantRow';

class ApplicantsList extends Component {
 constructor(props) {
  super(props);

  this.renderRow = this.renderRow.bind(this);
  this.renderHeader = this.renderHeader.bind(this);
}

renderRow(applicant) {
 return this.props.isFetching ? null : <ApplicantRow applicant={applicant} />;
}

renderHeader() {
 return (
  <Card>
    <CardHeader>
      <Text style={styles.cardHeading}>Applicant Management</Text>
    </CardHeader>

    <CardBody>
      <Text style={styles.cardText}>
        Here at ACME we got a large amount of applicants. Easily view, edit, remove, and {}
        add applicants from this screen!
      </Text>
    </CardBody>

    <CardFooter>
      <Button
        title={`Sort Applicants (Order: ${this.props.sortOrder})`}
        onPress={this.props.onSortPress}
      />
    </CardFooter>
  </Card>
);
}

 render() {
  return (
   <View style={styles.scene}>
    <ListView
      dataSource={this.props.dataSource}
      renderRow={this.renderRow.bind(this)}
      renderHeader={this.renderHeader}
      enableEmptySections
    />

    {this.props.isFetching && <ActivityIndicator style={styles.centered} size="large" />}
  </View>
 );
 }
}

ApplicantsList.propTypes = {
 dataSource: PropTypes.instanceOf(ListView.DataSource).isRequired,

 isFetching: PropTypes.bool,

 onSortPress: PropTypes.func,
};

export { ApplicantsList as default };

你会如何在基本的 JS 中做到这一点？阵列过滤器？阵图？数组减少？都不是？任何帮助将不胜感激！

Answer 1

您可以执行.filter 和.reduce：

const getTopSkillForApplicant = (applicantId, allSkills) => {
    const skillsForApplicant = allSkills.filter(skill => skill.applicantId === applicantId);
    const bestSkillForApplicant = skillsForApplicant.reduce((prev, skill) => {
        return prev.experienceInYears > skill.experienceInYears ? prev : skill;
    }, []);

    return bestSkillForApplicant;
}

工作 JSBin：http://jsbin.com/jenewal/edit?js,console

顺便说一句，我建议考虑对数据进行标准化。有一个名为 normalizr 的优秀库可以让您轻松完成此操作。

Answer 2

要在 java 脚本中对对象的 json 数组进行排序，您可以使用 sortOn 方法。这是最快的排序方式。

var sortedApplications = applicants.sortOn("experienceInYear");

http://upshots.org/javascript/array-prototype-sorton-for-javascript

在数组中查找内容的最快方法是使用简单数组的 indexOf 方法，如字符串数组。否则，您应该编写一个循环来查找匹配的对象元素。

但我在这里用简单的方式写给你：

var indexOfTargetedAge = ageArray.indexOf (5);
applicants[indexOfTargetedAge]// is the item that you needed