Question 110948 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – How to filter array based on selected item

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;
Tags:

2

Answers


  1. 0

    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)
    Login or Signup to reply.
  2. 0

    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);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search