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。

我想展示每个申请人＆＃39;卡体内申请人名单中的最高技能。 Like this。更具体地说，在ApplicantRow组件中使用道具。

这是组件结构：

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

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

但我在这里写了一个简单的方法：

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

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

2 个答案: