# Display items - Linked tables - Many to many relationship

**URL:** <https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061>\
**Category:** How do I?\
**Created:** [October 25, 2023, 9:36pm UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061 "2023-10-25T21:36:30Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![benji241](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benji241](https://community.weweb.io/u/benji241)\
**Post date:** [October 25, 2023, 9:36pm UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/1 "2023-10-25T21:36:30Z")

</div>

I have two tables Recipes and Items. I want to be able to show all of the items that are linked to a recipe.  
I am using Supabase and these items are linked together through a separate linked table with only the id’s of the recipe and the item. So I have 3 tables called “Recipe”, “Item” and the lock table which I’ve called “Item in recipe link”

I am trying to display the items inside a div below the recipe name. I am used to a different no code platform which goes about this in a different way so I’m trying to learn how to do this in Weweb.  
So far I have the Recipe in a div that has the Recipe collection bound to it and inside that div is the text that is bound to the recipe name.  
Next I have a div that has text inside it. I want to be able to display all of the items information in this div including name, description etc.

On the items div should I be setting the “items in recipe link” collection or the “items” collection? I was trying to set the “items in recipe link” collection and then filter by the current recipe id. That’s where I get lost.  
Is there a video explaining this type of scenario.

And also is there a trick to putting more text items inside a div once it’s bound to a collection. It doesn’t seem to let you do that unless that text is already bound to the same collection

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 25, 2023, 9:38pm UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/2 "2023-10-25T21:38:40Z")

</div>

You can apply the same logic used here

> [@Joins From 2 Tables In Supabase](https://community.weweb.io/t/joins-from-2-tables-in-supabase/4647):
>
> Hey guys! @Broberto @Joyce Elementary questions here… What is the best way to get another table with a foreign key from another (AKA Joins) form supabase? Example, a table called “users” has a user ID integer. That user id integer is a foregin key in a table called “accounts”, and I want to get the account ID based upon that user ID integer. I know its simple, but just need to be pointed in the best way to do this within weweb. Currently I am changing variables frequently and I am noticing its…

For more info, check out how to make Supabase Views, it’s fairly simple.

---

<div class="post-metadata">

**Author:** ![benji241](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benji241](https://community.weweb.io/u/benji241)\
**Post date:** [October 26, 2023, 1:22am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/3 "2023-10-26T01:22:19Z")

</div>

Thanks… I’ll look into this and see how I go

---

<div class="post-metadata">

**Author:** ![benji241](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benji241](https://community.weweb.io/u/benji241)\
**Post date:** [October 26, 2023, 9:15am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/4 "2023-10-26T09:15:23Z")

</div>

I got this to work. Thanks.

However I need to go deeper.  
Inside the items table that is linked via the item\_recipe link relationship there are also other relationships.  
I have relations setup but when I reference this in the view it only shows the ID. The view code is below.

create view  
item\_recipe\_view as  
select  
recipe.recipe\_id,  
recipe.recipe\_name,  
item.item\_id,  
item.item\_name,  
item.item\_description,  
item.usecase\_id, ( **This is the line that I need to access the name on instead of just the ID. It comes from a separate table called usecase and the column I need is called usecase\_name** )  
item\_recipe\_link.item\_in\_recipe\_qty

from  
item\_recipe\_link  
left join recipe on item\_recipe\_link.recipe\_id = recipe.id  
left join item on item\_recipe\_link.item\_in\_recipe\_id = item.id;

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 26, 2023, 9:39am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/5 "2023-10-26T09:39:02Z")

</div>

Could you show the schema of your tables? Is the name in a different table referenced by the ID?

---

<div class="post-metadata">

**Author:** ![benji241](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benji241](https://community.weweb.io/u/benji241)\
**Post date:** [October 26, 2023, 9:54am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/6 "2023-10-26T09:54:34Z")

</div>

![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/00896f01373a17f8582083f8cf64b0cfcb4bf760.png)

---

<div class="post-metadata">

**Author:** ![benji241](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benji241](https://community.weweb.io/u/benji241)\
**Post date:** [October 26, 2023, 9:56am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/7 "2023-10-26T09:56:00Z")

</div>

The usecase is linked to the items. I am trying to show the usecase name (not the ID).

I am trying to have a Recipe as the main line and then nested inside that in a row below is any item that is linked to that recipe. The item line needs to have all of the items from the items table. See below. The items collapse and you only see a list of recipes until you expand it to see the items inside.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2ad7442b64a4b292de2f82478f9f07ef5b84ce43.png)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 26, 2023, 10:31am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/8 "2023-10-26T10:31:55Z")

</div>

then you just join the two tables ON usecase\_id

item i join usecase u on i.usecase\_id = u.id

and then select u.name, or something like that, I can’t see the other one, how it’s structured

---

<div class="post-metadata">

**Author:** ![benji241](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benji241](https://community.weweb.io/u/benji241)\
**Post date:** [October 27, 2023, 7:39am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/9 "2023-10-27T07:39:54Z")

</div>

Am i supposed to type this at the end of the same view query?

I get a destructive error.  
Also where do you do the u.name part? I was able to do all of this before with no code but this is a different approach so im just a bit lost.  
I have attached the supabase view query and the usecase and items collections.

**Image below: Supabase view query error**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/79c3efdfd62582dc7d611e1ecf685effe8ab57f1.png)

**Image below: “usecase” collection**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/29244584e1171ae5b97a15b4346de84058fc0824.png)

**Image below: “item” collection**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b3389d190624346570e6efca516ed8f35246daae.png)

**Image below: “item\_in\_recipe\_link” collection**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/aee54e4241265af427cbff59a198f4db313f0bb0.png)

I appreciate your help.

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 27, 2023, 7:54am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/10 "2023-10-27T07:54:25Z")

</div>

join usecase u on u.id = item.usecase\_id

---

<div class="post-metadata">

**Author:** ![benji241](https://avatars.discourse-cdn.com/v4/letter/b/bb73d2/32.png) [@benji241](https://community.weweb.io/u/benji241)\
**Post date:** [October 27, 2023, 8:16am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/11 "2023-10-27T08:16:30Z")

</div>

Thanks. I’ll try that

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [October 27, 2023, 8:17am UTC](https://community.weweb.io/t/display-items-linked-tables-many-to-many-relationship/5061/12 "2023-10-27T08:17:43Z")

</div>

Yeah, if I had access to the supabase sql editor, it would be simpler, doing these things remotely is a little tidious. Hopefully this will work though)
