Update search results from api when value changes - swift

Question

I have a search bar that will perform a search function based off user input. When the user searches a list is populated (ie. this is a meal app, so if they search for "eggs" a list will be populated showing results of search)
My issue is when the user completes there first search and wants to type again to find a new value (food), the list does not populate again. The API still makes the call, but I'm having trouble updating the list. I tried adding removeAll() to the array onSubmit but it didn't work as expected.
struct FoodSearchResultsView: View {
//calls API
#EnvironmentObject private var foodApi: FoodApiSearch
//textfield input
#State private var searchResultsItem = ""
//if toggled, will display, binded to search bar
#Binding var userSearch: Bool
//var holds if textfield typing is complete by user
#Binding var textComplete: Bool
//triggers select breakfast, lunch, dinner optins
//when false, api results will not display
#State private var isViewSearching = false
var body: some View {
if userSearch{
VStack{
Text(isViewSearching ? "Results" : "Searching..")
Spacer()
// delays showing api call
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.7) {
self.isViewSearching = true
}
}
//if user has completed searching for a food
if isViewSearching{
List(foodApi.userSearchResults){meal in
VStack{
HStack{
VStack(alignment: .leading){
Text(meal.mealName)
HStack{
Text(meal.calories + " cals, ")
.font(.caption)
.offset(y:8)
Text(meal.brand)
.font(.caption)
.offset(y:8)
}
}
.foregroundColor(.black)
Spacer()
Image(systemName: "plus.app")
.font(.title2)
.foregroundColor(.blue)
.offset(x: 30)
}
.frame(width:200, height:40) //width of background
.padding([.leading, .trailing], 60)
.padding([.top, .bottom], 10)
.background(RoundedRectangle(
cornerRadius:20).fill(Color("LightWhite")))
.foregroundColor(.black)
Spacer()
}
}
.frame(height:800)
}
}
}
}
}
SearchBar
struct MealSearchBar: View {
//TEXTFIELD
#State var userFoodInput = ""
#State private var didtextComplete = false
//if user seached for a meal
#State private var didUserSearch = false
//calls search API
#StateObject private var foodApi = FoodApiSearch()
var body: some View {
VStack{
ZStack{
Rectangle()
.foregroundColor(Color("LightWhite"))
HStack{
Image(systemName: "magnifyingglass")
TextField("Enter Food", text: $userFoodInput)
.onSubmit {
foodApi.searchFood(userItem: userFoodInput)
didUserSearch = true
userFoodInput = ""
}
//Text(foodApi.foodDescription)
}
.foregroundColor(.black)
.padding(.leading, 13)
}
.frame(height:40)
.cornerRadius(15)
.padding(12)
}
FoodSearchResultsView(userSearch: $didUserSearch, textComplete: $didtextComplete)
.environmentObject(foodApi)
}
}
I only attached my results view and searchbar that calls the view. I believe the issue is happening onSubmit of the textfield, if you need the api call as well, will be happy to supply it, but to confirm again for clarity, despite the list not refreshing, the API is still updating, despite the list not updating.
Update: Added API Call
class FoodApiSearch: ObservableObject{
var userSearchResults: [Meal] = Array()
#Published var foodUnit = ""
#Published var calories = ""
#Published var brand = ""
//will search for user Input
func searchFood(userItem: String){
///IMPROVE API FUNCTION LATER ON DURING LAUNCH
///
let urlEncoded = userItem.addingPercentEncoding(withAllowedCharacters: .alphanumerics)
guard
let url = URL(string: "https://api.nal.usda.gov/fdc/v1/foods/search?&api_key=****GWtDvDZVOy8cqG&query=\(urlEncoded!)") else {return}
URLSession.shared.dataTask(with: url) { (data, _,_) in
let searchResults = try! JSONDecoder().decode(APISearchResults.self, from: data!)
DispatchQueue.main.async { [self] in
var counter = 0
for item in searchResults.foods ?? []{
if (counter < 5){
self.userSearchResults.append(Meal(
id: UUID(),
brand: item.brandOwner?.lowercased().firstCapitalized ?? "Brand Unavailable",
mealName: item.lowercaseDescription?.firstCapitalized ?? "food invalid",
calories: String(Double(round(item.foodNutrients?[3].value! ?? 0.00)).removeZerosFromEnd()),
quantity: 2,
amount: "test",
protein: 2,
carbs: 2,
fat: 2)
)
counter += 1
}
else{return}
}
}
}
.resume()
}
}

Answer 1

Thank you everyone for the advice and tips. So the actual issue was actually one of relative simplicity. I was just missing emptying the array upon ending the search.
if didtextComplete{
print("complete")
foodApi.userSearchResults = [] //emptys list
userFoodInput = ""
}
I also marked a var didtextComplete = true when the search was finished. Not the answer I was looking for, but overall it works so I'll remain satisfied for the time being