How to filter an API Call using axios parameters

Question

I have and API call to show some ingredients and the user can select what ingredient he want to filter and should trigger a filter at this same Axios GET API

This is the API call that runs when the app Loads this screen:

let recipeRequest = 'http://localhost:3333/report'
let ingredientsRequest = 'http://localhost:3333/ingredients'

useEffect(() => {
    recipeRequest = axios.get(recipeRequest, {params:{name:nameArr}})
    ingredientsRequest = axios.get(ingredientsRequest)
      axios.all([recipeRequest, ingredientsRequest])
        .then(axios.spread((...responses) => {
          setRecipes(responses[0].data)
          setIngredientList(responses[1].data)
        }))
        .catch(function (error) {
          console.log('API CALL - recipe/ingredient - error: ', error);
        })
  },[])

with all the data presented to the user, he can select the ingredient he want and it should filter the respective recipe.

This is the flatlist with all the INGREDIENT data

<FlatList
  horizontal
  bounces={false}
  data={ingredientList}
  renderItem={({ item, index }) => (
  <TouchableOpacity key={item.id} onPress={() => selectedIngredient(item, index)}>
    <Card key={index}>
      {item.isSelected ? (
      <>
        <Text key={item.title} style={styles.titleText}>{item.name}</Text>
        <Text style={{ color: "green" }}>{"Selected"}</Text>
      </>
      ) : (
      <>
        <Text key={item.title} style={styles.titleText}>{item.name}</Text>
        <Text style={{ color: "red" }}>{"Not Selected"}</Text>
      </>
      )}
    </Card>
    <ImageBackground key={item.illustration} source={item.illustration} style={styles.cardImage}> 
    </ImageBackground>
  </TouchableOpacity>
  )
  }
  keyExtractor={(item) => item.index}
/>

This is the filter that runs when the user select an Ingredient at the flatlist

let obj = ingredientList.filter(field => field.isSelected === true)
const nameArr = obj.map(arr => arr.name);

Once the "nameArr" is updated, how can I re call the "recipeRequest" variable with this "nameArr" in the "params" to make the query properly filtered?

Rudson Rodrigues Rudson Rodrigues · Accepted Answer · 2020-11-09T03:39:55

I created a function called "filteredRecipe" that is called at the onPress event of the button in this screen. So the main problem is solved, but now I am facing another issue, but this will be other question, thanks a lot for the help.

const filteredRecipe = () => {
    const filteredRecipe = recipeRequest + "?name=" + nameArr
   axios.get(filteredRecipe)
      .then((response) => {
          console.log('(response): ', response)
          setRecipes(response)
        })
        .catch(function (error) {
          console.log('API CALL - recipe/ingredient - error: ', error);
        })
  }

How to filter an API Call using axios parameters

1 Answers