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

Question

I get a backend data structure as following.

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

In the UI, I have three dropdown lists.

Department ID       |      Stream        | Course ID

First Department ID dropdown list should be populated with departmentIDs 105654 and 105655. When department id 105654 is selected, Stream dropdown list should be populated as science and art. When science is selected from this second dropdown list, course ids should be populated in third dropdown list as 104, 105, 106.

The json data structure above is to have all data at once so that I don't have to make backend call each time a dropdown option is selected.

How can I achieve this using react js? I am new to it.

Ashish Chaudhary · Accepted Answer · 2016-08-17 13:55:24Z

2

Assuming that you receive data in data and your dropdown components each accept an array that must be inserted in their respective dropdown menus, you get the arrays like this:

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

Now assuming you have some departmentId selected, you can do:

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

Now assuming you have the stream stored in streamId, you can do:

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

You should store each array in a state and pass on that state as a prop to the corresponding dropdown components.

answered Aug 17, 2016 at 13:55

Ashish Chaudhary

7985 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafi Ud Daula Refat · Accepted Answer · 2016-08-18 02:52:35Z

I would like to use 3 react-select for 3 dropdown list and connect them based on the selected value of one another. the state will look like your provided data and three flag for three dropdown fields.

dropdown1: true, dropdown2: false, dropdown3: false

The render will look like:

{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}

So first the dropdown list of Department will be visible only. On selecting a value in dropdown list of Department i would set the dropdown2 state to true and it will make the dropdown list of Stream visible and so on..

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related