How can I store an API call response as an object or parse an array as a JSON?

My app is trying to make an API call and display the data from it in a modal. It isn't working because I'm storing the response from the API call as an array at the moment, meaning I can't access the sub-elements of the response.

My question, then: is there some way to either:

  • Store an object using State so that I can conveniently reference parts of that object?

OR

  • Parse an array as a JSON so I can take the data from the response and process it as a JSON when needed?

I realise this is kind of a weird question, so any answer that would achieve the same result would also be great.

Here's my code:

const DrinkPopup = (props) => {

  let [drinkDetails,setDrinkDetails] = useState([])
  let selectedDrinkId = props.drink

  const getDrinkAsync = async (selectedDrinkId) => {
    try {
      let response = await fetch('https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i='+selectedDrinkId);
      let data = await response.json();
      setDrinkDetails(data.drinks)
      return true;
    } catch (error) {
      console.error(error);
    }
  }

  useEffect (() =>  { 
    getDrinkAsync(selectedDrinkId)
    console.log(selectedDrinkId) 
    console.log(drinkDetails) 
  },[]);
  


  return(
    <Modal isVisible={props.modalVisible}
    onBackdropPress={()=>{props.setModalVisible(false)}} //allows closing modal by tapping outside it or back button
    onBackButtonPress={()=>{props.setModalVisible(false)}} 
    animationIn={"slideInUp"}>  
      <View style={styles.infocard}>
          <View style={styles.titleBox}>
            <Text style={styles.header}>{drinkDetails.idDrink}</Text>
          </View>
      </View>
    </Modal>


  )


}


Read more here: https://stackoverflow.com/questions/65708632/how-can-i-store-an-api-call-response-as-an-object-or-parse-an-array-as-a-json

Content Attribution

This content was originally published by Swystem at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: