如何根據所選項目過濾數組

Question

我在 json 文件中有一個對象數組：

[
  {
    "department": "Sound Department",
    "subDepartments": [
      "Supervising Sound Editor",
      "Dialog Editor",
      "Sound Designer",
      "Foley Artis",
      "Sound Recordist"
    ]
  },
  {
    "department": "Camera Department",
    "subDepartments": [
      "Camera Operator",
      "Second Assistant Camera",
      "Other Assistant Camera",
      "Steadycam Operator",
      "Focus Puller"
    ]
  },
  {
    "department": "Production Department",
    "subDepartments": [
      "Camera Operator",
      "Second Assistant Camera",
      "Other Assistant Camera",
      "Steadycam Operator",
      "Focus Puller"
    ]
  }
]

由此我創建了一個部門下拉菜單。 從那里我想根據選擇的部門創建另一個子部門的下拉菜單。

Departments 的下拉菜單工作正常，並且將該部門存儲在 state 中。我只是不知道如何過濾這些。

import React, { useState } from "react";
import "./CreateJobPage3.css"

import Button from "../Input/Button";
import Select from "../Input/Select";
import departmentData from "../Data/departmentSheet.json";

const CreateJobPage3 = (props) => {
    const [department, setDepartment] = useState()
    const [subDepartment, setSubDepartment] = useState()

    const departments = departmentData.map((data) => data.department)

    const subDepartments = departmentData.filter(item => {
        return item.department === department;
      });

    const departmentHandler = (props) =>{
        setDepartment(props)
    }

    const subDepartmentHandler = (props) =>{
        setSubDepartment(props)
    }

  return (
    <>
      <div className="CJP3___inner">
          <Select
            placeholder="Choose Department"
            options={departments}
            value={department}
            onChangeOption={departmentHandler}
          />
          <Select
            placeholder="Choose Department"
            options={subDepartments}
            value={subDepartment}
            onChangeOption={subDepartmentHandler}
            isMulti={true}
          />
      </div>
      <Button className="isGrey formButton" text={"Add Function"} />
    </>
  );
};

export default CreateJobPage3;

Answer 1

所以你已經有了過濾，你缺少的是從 object 中獲取subDepartments屬性，為此你可以使用map ，但因為你的subDepartments本身是一個數組，我會使用flatMap ，否則結果將是[['sub1,'sub2']]

      const subDepartments = departmentData.filter(item => {
        return item.department === department;
      }).flatMap(item => item.subDepartments);

Answer 2

這里有 2 個問題。 通過使用Array.filter您的結果將是整個部門 object 的數組，而您只需要子部門。 在這種情況下，使用Array.find然后訪問 subDepartments 數組要快一些。

 const departmentData = [{ "department": "Sound Department", "subDepartments": [ "Supervising Sound Editor", "Dialog Editor", "Sound Designer", "Foley Artis", "Sound Recordist" ] }, { "department": "Camera Department", "subDepartments": [ "Camera Operator", "Second Assistant Camera", "Other Assistant Camera", "Steadycam Operator", "Focus Puller" ] }, { "department": "Production Department", "subDepartments": [ "Camera Operator", "Second Assistant Camera", "Other Assistant Camera", "Steadycam Operator", "Focus Puller" ] } ] let department = "Production Department" const subDepartments = departmentData.filter(item => { return item.department === department; }); console.log('Current Method:', subDepartments) const subDepartmentsNew = departmentData.find(item => { return item.department === department; }).subDepartments; console.log('New Method:', subDepartmentsNew)