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에는 3 개의 드롭 다운 목록이 있습니다.

Department ID  |  Stream  | Course ID 

먼저 부서 ID 드롭 다운 목록이 부서 ID 105654을 선택하면, 스트림 드롭 다운 목록은 과학과 예술로 채워 져야합니다 departmentIDs 105654 및 105655.로 채워야한다. 이 두 번째 드롭 다운 목록에서 과학을 선택하면 코스 ID는 104, 105, 106과 같이 세 번째 드롭 다운 목록에 채워 져야합니다.

위의 json 데이터 구조는 모든 데이터를 한꺼번에 가져와 드롭 다운 옵션이 선택 될 때마다 백엔드 전화를 겁니다.

반응식 j를 사용하여 어떻게하면됩니까? 나는 그것에 익숙하지 않다.

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; 

각 배열을 한 상태로 저장하고 해당 상태를 해당 드롭 다운 구성 요소의 소품으로 전달해야합니다.

Answer 2

3 개의 드롭 다운 목록에 대해 3 개의 반응 선택을 사용하고 서로 선택한 값을 기준으로 연결하고 싶습니다. 상태는 제공된 데이터와 3 개의 드롭 다운 필드에 대한 3 개의 플래그처럼 보입니다.

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

그래서 첫번째 부서의 드롭 다운 목록 만 볼 수 있습니다 : 것처럼 렌더링

dropdown1: true, dropdown2: false, dropdown3: false 

는 볼 것이다. 내가 사실에 dropdown2 상태를 설정합니다하고 등등 스트림 볼의 드롭 다운 목록을 만들 것이다 부서의 드롭 다운 목록에서 값을 선택에 ..