# Collection

## Why Collections are needed Let's say you are building a list of all your blog posts. Each blog post will have an image, a title, and a link. You have 50 blog posts. Does this mean you need to duplicate your design 50 times manually? No. Collections let you design something once, and it will repeat it for every item in the array and contain the data for the current iteration (e.g., the blog post title). ## What's an array or object? Collection can iterate over both **arrays** (lists) and **objects** (key-value pairs). ### Arrays An array is a list of data. In the case of blog posts, this might look like: ```javascript [ { title: "Hello world" }, { title: "Lorem ipsum" }, { title: "Webstudio rocks!" }, ]; ``` When iterating over an array, the Collection Item contains the current item's data. ### Objects An object is a set of key-value pairs. For example: ```javascript { home: { label: "Home", url: "/" }, about: { label: "About", url: "/about" }, contact: { label: "Contact", url: "/contact" } } ``` When iterating over an object, the Collection Item contains both the **key** (e.g., "home") and the **value** (e.g., `{ label: "Home", url: "/" }`). You can access them via `Collection Item.key` and `Collection Item.value`. {% hint style="warning" %} When binding data to a Collection, **you must bind the array or object**, i.e., the data you want to iterate over. If you bind something else, you'll receive an error. {% endhint %} If you are binding external data, the array is nested somewhere within.

Right and wrong ways to bind data to a collection — Example of where the array is at for an external service (will vary for each service)

In the image, the data bound to the component is: 1. ❌ Not the array 2. ❌ The first item in the array (0), not the entire list 3. ✅ The array It's unclear why each item is correct or incorrect by just looking at the image, so let's clarify. **You'll know when you get to the array when the next items in the autocomplete are numbers.** The numbers represent each item in the list. Once you see the numbers, backspace, as you don't want to select one item; you want the list.

Autocomplete showing array items in Binding — The numbers indicate each item in the list/array

## How to use Collection Add the Collection component to the canvas and either manually enter data (less common) or [bind data](/university/foundations/expression-editor.md#binding) to it (more common). **The Collection iterates over the array, so you must bind just the array portion of your variable to it. See** [**What's an Array**](#whats-an-array) **for more info.** Optionally, rename the default Collection Item variable to something more semantic. If you are iterating over blog posts, name it "Blog Post." Now, you can add components to the Collection, and the Collection will automatically duplicate it for the number of items in the array. If you have multiple components, wrap everything in an [Element](/university/core-components/element.md) component. Next, [bind](/university/foundations/expression-editor.md#binding) the Collection Item (or whatever you named it) to the various components. You will see it output a different value depending on the iteration. ## Using Collections with Radix Components When working with [Radix Components](/university/radix.md), you might want to dynamically generate items for various components such as accordions, tabs, or menus. **You must provide the Value field with a unique value for each item.** This is commonly done by binding an ID or slug from the dynamic data to the field. ### Accordions

The Item has a unique value from the dynamic data bound to the Value field

### Tabs On Tabs, you need to manually add the "value" property on both the Tab Trigger and Tab Content by going to Settings > Properties & Attributes > "+". Tab Triggers and Tab Contents maintain their relationship by having the same value. For example, the Tab Trigger with the value "asdf" will make the Tab Content with the value "asdf" active.

Also, you can change the default value on the Tabs instance by binding the first value in the collection to it. ## Related Videos {% embed url="" %} ## Related * [Content Embed](/university/core-components/content-embed.md) – Render rich text from CMS * [Markdown Embed](/university/core-components/markdown-embed.md) – Render markdown content * [Variables](/university/foundations/variables.md) – Dynamic data binding * [CMS](/university/foundations/cms.md) – Content management integration --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.webstudio.is/university/core-components/collection.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.