Looking to generate dropdowns in a React Native mobile application based on the length of values in an API JSON array. Here's an example of the desired output:
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)
If the API response includes Choice 1 and Choice 2, we would need to generate 2 dropdowns accordingly.
The current code implementation only retrieves the last Choice and Choice Data from the API response array. To achieve the desired functionality, we're using the react-native-material-dropdown library and mapping it according to the length of the JSON array.
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
}