All topics

Set values of items based on repeat item values

mossi

7 months ago

To simplifiy, I repeat a div on an api. The api returns 3 strings "Apple", "Grapes" and "Banana". The div has 2 text items (Text1 Text2). I set the value of the first text based on the repeat item values. So now I have a list with 3 lines like this: Apple Text2 - Grapes Text2- Banana Text2. What I need to achieve is to set the Text2 based on the value of the text1 in its index. So if it is Apple text2 to be "Round", if its Grapes, text2 to be "Purple" and for banana text2 to be "Sweet".
Armand

7 months ago

One solution could be to add the Text2 values into the same object as the Text1 values, so they are returned back to you from the same API call.

If this is not possible, then you could create a Variable with objects that hold Text1 and Text2. Then you can Find them with a formula for each Item in your Repeat.

See the image I attached with a similar example (translated to your example it would be: label=text1, icon=text 2)
Armand

7 months ago

It won't be 100% the same in your example, as my example comes from a component, but it should give you an idea of how to go about it.
mossi

7 months ago

Hey Armand, I appreciate the response. I could just twick the backend to return the data in this case but I wanted to learn how to manipulate data in frontend as I think thats the proper way to do it.

I got it to work using chain IF statements in the Text2 value formula. But that's not a scalable approach as I'd need to define a ifelse statment for all the values. Your approach sounds more scalable but I didn't understand some steps, like what do you mean and how "create a Variable with objects that hold Text1 and Text2"

Also let me actually clarify that what I have is a list generate by an api. each list item has Text1 (value set by repeat item) and an icon. Text2 would basically be the name of the icon (its the shoelace component icon and the icon takes names and loads the relavant icon from their server.) When you get a chance, I'd appreciate it if you could send me more details about your approach.
Thank you
@mossi
Hey Armand, I appreciate the response. I could just twick the backend to return the data in this case but I wanted to learn how to manipulate data in frontend as I think thats the proper way to do it.

I got it to work using chain IF statements in the Text2 value formula. But that's not a scalable approach as I'd need to define a ifelse statment for all the values. Your approach sounds more scalable but I didn't understand some steps, like what do you mean and how "create a Variable with objects that hold Text1 and Text2"

Also let me actually clarify that what I have is a list generate by an api. each list item has Text1 (value set by repeat item) and an icon. Text2 would basically be the name of the icon (its the shoelace component icon and the icon takes names and loads the relavant icon from their server.) When you get a chance, I'd appreciate it if you could send me more details about your approach.
Thank you
Armand

7 months ago

Getting an icon from the same object as the Text1 is exactly what I'm doing in the above image.
To add some explanation to it:
1. Categories is the Variable that holds a bunch of objects (the first 6 (0-5) are visible in the image. Each object has a Text (for instance Flight) and an Icon.
2. The Find node looks for values in the above Variable:
2A. Item (from the Variable) which is a label Text that should match (Equal) the text below
2B. Attribute with an Object, with the Label selected.
3. Once there is an Object match based on the Label text, then I Get the Icon from that Object.

Here is an image how the Variable is set up with the Label and the Icon data.

Having said all the above, to me it still seems it would be more efficient to just take all the data from the API instead in your case. But I may be wrong as I don't have a complete picture of what you're trying to do.

If you have any further questions do let me know. And if you can, do share a screenshot of what you're doing, that makes it easier to get an idea of where it may or may not be going wrong 🙂
In the above image, all the objects will look the similar in the most right Array.

Set values of items based on repeat item values

mossi

Armand

Armand

mossi

Armand