Join the Webstudio community

Updated 2 months ago

How to display both Object key and value using collactions

At a glance

The community member has an object they want to display in a list, where the object key would be the title and the value would be some text. They tried using a collection, but encountered issues where the previous items' values were undefined. The community members discussed that collections only accept arrays, not objects, and that the data would need to be changed on the backend before working with it in the webstudio. They also suggested describing the use case with sample data to better understand the need to iterate over an object. The community members eventually concluded that a collection is not necessary for the given use case, and that an array would be the way to go, especially if the number of items is not large.

i have a an object and i would to display this object in a list, the object key would be title and value would be a text under it. i tried using collection but when i set the value for value for one i am getting undefine for the previous items

i am doing something like this to get the key
${collectionItem.key}
B
O
M
12 comments
Collection accepts only array. You cannot iterate over objects. Would need to change data on backend before working with it in webstudio.
Probably also better describe your use case with a sample of the data and explaining why you need to iterate over object, I have a strong feeling there is a mistake in wanting to do that
Ok so I want to display a UI like

No of users : 10
No of downloads: 10

I want to store this in object.... So when I iterate on the object I get the key and value to display in my UI
Something like this UI
Don't need to iterate unless this collection is dynamic, means items are getting added and removed dynamically and there is a lot of them, you have on the screenshot 4 items
don't need a collection for this at all
Done it manually
It's not a lot of items
In a case where I have a lot of items for this usecase
How do you suggest I go about it
array is the way to go
Add a reply
Sign up and join the conversation on Discord