Issue
I am having trouble updating the content of a List on my webpage. The items in the List are based on an async JS function, and while it works fine on page load, it doesn't update when I toggle a button that re-runs the function with different settings. I am unsure of how to solve this issue, and using storevalue doesn't seem to work as the List's nested list (List2) is based on List1.
Resolution
The issue is that the List content does not update after calling an async JS function with new settings. To resolve this issue, you need to clear the List content before reloading it with the updated data.
You can achieve this by setting the List data to an empty array before calling the loadData-function again. Then, after the data is retrieved, you can set the List data to the new array.
Here's an example code snippet to give you an idea:
// clear the List data
$w('#myList').data = [];
// load new data with updated settings
JS.loadData(newSettings)
.then((data) => {
// set the List data to the new array
$w('#myList').data = data;
})
.catch((error) => console.log(error));
Regarding the nested list with a plus button to add new input widget, you can update the UI after adding a new item to the list by calling the refresh() method on the list component. This will re-render the list with the updated data.
Here's an example:
// add new item to the list
myList.push(newItem);
// refresh the list to update the UI
$w('#myList').refresh();
Overall, the solution involves clearing the List content before loading new data and calling the refresh() method on the list component after adding a new item to the nested list.