如何根据 JSON 数组长度映射下拉列表

Question

这个问题是关于反应原生移动应用程序的。 我想知道如何根据我的 API JSON 数组长度值生成下拉列表。

在我的情况下，输出值是这样的

eg:- Choice 1 (Label of the Drop Down)
           -Sub Choice 1 . (Value Data)
           -Sub Choice 2 (Value Data)
           -Sub Choice 3 (Value Data)

   Choice 2 (Label of the second Drop Down)
           -Sub Choice 1 . (Value Data)
           -Sub Choice 2 . (Value Data)
           -Sub Choice 3 . (Value Data)

像这样，如果 API 响应给出选择 1，选择 2 -> 那么我需要相应地生成 2 个下拉列表。

这是我的代码，根据我的代码，我只得到 API 响应数组的最后一个选择和选择数据

我正在使用 react-native-material-dropdown 库，我需要用 JSON 数组长度相应地映射它

 if(responseText.success == true)
    {
      var count = Object.keys(responseText.data).length;  //Getting Array Data Length
      let drop_down_data = [];  //  For Dropdown box
      for(var i=0;i<count;i++){
        // Next Loop for Fetching Choice Items
        var t_count = Object.keys(responseText.data[i].choiceItems).length;
        for(var j=0;j<t_count;j++){

          var Add_On_Name = responseText.data[i].name
          console.log(Add_On_Name)
          this.setState({addOn_name: Add_On_Name});

          this.setState({riceTypeData:responseText.data[i].choiceItems[j].name});
          drop_down_data.push({ value: responseText.data[i].choiceItems[j].name}); 

        }

      }
      this.setState({ drop_down_data , progressDialog:false}); // Set the new state

    }

Answer 1

希望这可以帮助。

//This is the initial state.
state = {
   dropdownsdata: []
};

//This is going into the api successcallback
if (responseText.success) {
  let all_dropdownData = [];
  for (let i = 0; i < responseText.data.length; i++) {
    let ind_dropdownData = [];
    for (let j = 0; j < responseText.data[i].choiceItems.length; j++) {
      let Add_On_Name = responseText.data[i].choiceItems[j].name;
      let temp = {};
      temp.value = Add_On_Name;
      ind_dropdownData.push(temp);
    }
    let temp_obj = {};
    temp_obj.label = responseText.data[i].name;
    temp_obj.data = ind_dropdownData;
    all_dropdownData.push(temp_obj);
  }
  this.setState({ dropdownsdata: all_dropdownData });
}
//Function for rendering n number of dropdowns.
renderDropdowns = () => {
  return this.state.dropdownsdata.map(e => {
    return <Dropdown label={e.label} data={e.data} />;
  });
};

render(){
  return <View>{this.renderDropdowns()}</View>;
};