如何在 reactjs 中创建动态 url

Question

const category = { 
  q="",   
  mealtype="breakfast",  
  cuisinetype="American",   
  dishType="Soup" 
}  

const base = `https://api.edamam.com/api/recipes/v2?type=public&q=${query}=&app_id=${app_id}&app_key=${app_key}`;

User can select any category ex mealtype , cuisinetype , dishType , or combination of them. I am looking for a way to construct url based on selected input.

Answer 1

This function generates url string out of input object, but drops keys with empty values:

 const category = { q: "", mealtype: "breakfast", cuisinetype: "American", dishType: "Soup" } const obj2url = (params) => Object.entries(params).reduce((prev, [key, value]) => value ? prev + `&${key}=${value}` : prev, '') const url = "https://api.edamam.com/api/recipes/v2?type=public" + obj2url(category) console.log(url)