React JS - 解析复杂的 Json 结构并填充到下拉列表中

Question

我得到如下后端数据结构。

{
    "courseDetails" : 
        [{"departmentId" : 105654,
        "courses" : 
            [{"stream" : "science","courseIds" : ["104","105","106"]}, 
             {"stream" : "art","courseIds" : ["102", "103"]}]
         }, 
          {"departmentId" : 105655,
          "courses" : 
            [{"stream" : "commerce","courseIds" : ["101", "100"]}]
          }
         ]
}

在 UI 中，我有三个下拉列表。

Department ID       |      Stream        | Course ID

第一个 Department ID 下拉列表应填充 departmentID 105654 和 105655。选择 department id 105654 时，Stream 下拉列表应填充为科学和艺术。从第二个下拉列表中选择科学时，课程 ID 应在第三个下拉列表中填充为 104、105、106。

上面的 json 数据结构是一次拥有所有数据，这样我就不必在每次选择下拉选项时都进行后端调用。

如何使用 React js 实现此目的？我是新手。

Answer 1

假设您在 data 中接收数据并且您的下拉组件每个都接受一个数组，该数组必须插入到它们各自的下拉菜单中，您将得到这样的数组：

const Department = data.courseDetails.map(obj => obj.departmentId);

现在假设您选择了一些 departmentId，您可以这样做：

const streams = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.map(obj => obj.stream)

现在假设您将流存储在 streamId 中，您可以这样做：

const courseIds = data.courseDetails.filter(x => x.departmentId === departmentId)[0].courses.filter(x => x.stream === streamId)[0].courseIds;

您应该将每个数组存储在一个状态中，并将该状态作为 prop 传递给相应的下拉组件。

Answer 2

我想对 3 个下拉列表使用 3 个 react-select，并根据彼此的 selected 值将它们连接起来。状态看起来像您提供的数据和三个下拉字段的三个标志。

dropdown1: true, dropdown2: false, dropdown3: false

渲染结果如下：

{this.state.dropdown1 ? <Select options=[all the Department ID] onChange={handleSelectDepartment} />: null}
{this.state.dropdown2 ? <Select options=[course corresponding stream ] onChange={handleSelectStream} />: null}
{this.state.dropdown3 ? <Select optons=[Stream corresponding courseID ] onChange={handleSelectCourse} />: null}

所以首先 Department 的下拉列表将只可见。在 select 在 Department 的下拉列表中设置一个值时，我会将 dropdown2 状态设置为 true 并且它将使 Stream 的下拉列表可见等等..

React JS - 解析复杂的 Json 结构并填充到下拉列表中

React JS - Parse a complex Json structure and Populate in a dropdown list

javascript

json

node.js

reactjs

dropdown