Getting an array with a specific index

  • /attachments/1316673015714676766/1316673015915876432/image.png

    benjabievres

    1 month ago

    Hi!

    From an API Call, I get an array of Collections "Series" that contains a few fields, as well as an array of Collections "Seasons".
    I want to add the "Series" array into a dropdown, and, when I select an item, I want a second dropdown to get the array of Seasons at the index selected in the first dropdown.
    So far, I managed to show the list of Series in the first dropdown; value is equal to the selected index.
    But I'm stuck to build the formula that fills the second dropdown with "Seasons", with the index selected in the first dropdown.

    Can you please help me to configure the second dropdown so that it lists the Seasons that are in the Index of the selected Series?

    Here is a sample data
    [{"id":11,"name":"Haven","seasons":[{"id":29,"number":1,"completed":false},{"id":30,"number":2,"completed":false},{"id":31,"number":3,"completed":false},{"id":32,"number":4,"completed":false},{"id":33,"number":5,"completed":false}],"completed":false},{"id":12,"name":"Games of Thrones","seasons":[{"id":34,"number":1,"completed":false},{"id":35,"number":2,"completed":false},{"id":36,"number":3,"completed":true},{"id":37,"number":4,"completed":false},{"id":38,"number":5,"completed":false},{"id":39,"number":6,"completed":false},{"id":40,"number":7,"completed":false},{"id":41,"number":8,"completed":false}],"completed":true},{"id":13,"name":"Breaking Bad","seasons":[{"id":42,"number":1,"completed":false},{"id":43,"number":2,"completed":false},{"id":44,"number":3,"completed":false},{"id":45,"number":4,"completed":false},{"id":46,"number":5,"completed":false}],"completed":false}]

    Please let me know if you need me to record a video where I explain with more details.
    thanks
    image.png
  • benjabievres

    1 month ago

    @Tom Ireland and @Lucas G it's related to my previous Post. I want to try your recommandation to retrieve most data in a single API call (instead of calling a "get seasons" endpoint everytime a Series is selected).
  • Armand

    1 month ago

    I know you are asking others who have pre-existing knowledge of your question, but I had some time now, and I think I understand your question. Apologies if I should've left it to Tom and/or Lucas G.

    If I understand it correctly you want to select a Series from dropdown 1 and then that should populate dropdown 2.

    Here's an example with your sample data (thanks for that): https://toddle.dev/projects/teal_ackbar_pregnant_tiger/branches/main/components/series?canvas-width=800&canvas-height=800

    As is quite clear I spent no effort on making it look pretty and just used a package for the dropdown to work. But the repeat, variable and action should be the same even if you don't use a package.

    Perhaps there is an even easier way to do this, but at least like this you won't have to call an API again and the selectedSerie variable is always overwritten when a new one is selected.
    ๐Ÿ’œ1
  • benjabievres

    1 month ago

    Hi @Armand Thank you so much! And please don't apologize for helping ๐Ÿ˜Š. I was not only asking Tom or Lucas, but the whole community. And this is great to always get nice help from everyone that can!! Again, thanks a lot, I will have a look at your example now.
  • /attachments/1316673015714676766/1316690271639048242/image.png

    benjabievres

    1 month ago

    @Armand , thank you again!! What I needed to do was a bit different (because the element was different), but your example gave me the right path!! I was using a Select, and in its "change" or "clicked" event, I don't have the Item or Index objects. But I have set the "value" of the Option element to "index", and I did the attached formula (in a change event) to pick the relevant Series item with Index=selected element. Thanks!!
    image.png
  • Armand

    1 month ago

    I'm glad you got it to work!
    ๐Ÿ˜Ž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.