PricingDocsAcademy
Bluesky ...
Wed, Dec 11, 10:29 PM

Changing items in a list generated from an API call

  • /attachments/1308731001555517441/1308731001794461737/image.png

    benjabievres

    21 days ago

    Hello,

    I would need advices on how to proceed for the following, please:

    I generated a List from an API call. I would like to be able to switch a boolean or to change the value of a field of some items, and to click a Save button.

    But, since the list items are generated from an Array I got from an API call, how can I set the different new values?

    To summarize: I want the list to be filled with data coming from the API call response array, I want to be able to change some values, and then to update data, calling another endpoint (I didn't build the endpoint yet).

    How can this type of use-case can be achieved?

    Thanks
    image.png
  • Tom Ireland

    21 days ago

    Hey! If you’re looking to update certain items, I’d recommend storing that in a variable and then calling a POST request to your API to update the item. It may be one at a time or multiple (depends on how you want to handle it), so you’d like likely need to store updates as an object or array of objects in your variable or construct one prior to your POST request. Does that make sense?
  • Tom Ireland

    21 days ago

    To add, your update (PATCH/POST/UPSERT) API call should have documentation outlining the body structure you need to send back and I’d imagine id or some other unique identifier will be required to update the correct record/s.

    If your list is repeated based on the API results, you should easily be able to get the repeat item’s values required to save in a variable in order to send back in the body when doing an update.

    Shout out if you need more pointers.
  • benjabievres

    21 days ago

    Hey @Tom Ireland! Thanks a lot!
    I did the way you instructed and I followed the « Todo » list tutorial of Andreas, and I managed to make it work by calling the endpoint everytime I select the checkbox or when I click a new ok button.
    But I’m still wondering how I could make multiple changes in the list and update all at once when I click a final Save button.
    But anyway, it’s already perfect like this. I will play with it to see if can make it better.
    Thanks again!!
    💪1
  • Tom Ireland

    21 days ago

    Amazing! Nice work. The way you’re doing it sounds good as it provides an instant update, so sounds optimal.

    For the save option, assuming you have an object that you send for each individual item, you could just append those objects to an array, so have a variable that is an empty array and then on your specific UI event, append the object to the array. Either Supabase or Xano support multiple record updates via API, so you would just send the whole array of objects when hitting save and then clear it on success.
    🤩1
  • benjabievres

    21 days ago

    @Tom Ireland yes you’re right, I just found that we have a lot of nice functions to handle json and arrays, just great!
    I will try and build an array from all events that occur and I will send them to a Make scenario 😁😁, as I’m testing all kind of interactions between Toddle and Make 😎
    Thanks again for all your valuable help!!
  • Tom Ireland

    21 days ago

    No problem! Glad I could help. Good luck and do shout if you have any other questions.
    👍1

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code — but accessible to your entire team!

Try toddle — it's free!

© Copyright 2024 toddle. All rights reserved.