How to filter array based on selected item-CodePudding

I have an array of objects in an json file:

[
  {
    "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"
    ]
  }
]

From this i'm creating a dropdown menu of Departments. From that i would like to create another dropdown menu of sub-departments based on which department have been selected.

The dropdown menu of Departments is working fine, as well as storing that department in a state. I just can't figure out how to filter these.

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;

CodePudding user response：

So you already have filtering, what you are missing is getting subDepartments property out of the object, for that you could use map, but because your subDepartments is itself an array, I would use flatMap, otherwise result would be [['sub1,'sub2']]

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

CodePudding user response：

2 issues here. By using Array.filter your result is going to be an array of the whole department object, whereas you just want the subdepartments. In this case, it's a little quicker to use Array.find and then just access the subDepartments array.

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)