# Get id in url in builder io

**URL:** <https://forum.builder.io/t/get-id-in-url-in-builder-io/6094>\
**Category:** Technical Questions\
**Created:** [August 9, 2024, 3:46am UTC](https://forum.builder.io/t/get-id-in-url-in-builder-io/6094 "2024-08-09T03:46:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kenz](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@Kenz](https://forum.builder.io/u/Kenz)\
**Post date:** [August 9, 2024, 3:46am UTC](https://forum.builder.io/t/get-id-in-url-in-builder-io/6094/1 "2024-08-09T03:46:38Z")

</div>

I currently have the link `http://localhost:9000/wecare/Home/5052d7b3-5e2e-ed11-9db1-000d3a856e52`. How can I retrieve the product information based on the ID `5052d7b3-5e2e-ed11-9db1-000d3a856e52` using only [Builder.io](http://Builder.io) without any coding?

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [August 12, 2024, 10:44am UTC](https://forum.builder.io/t/get-id-in-url-in-builder-io/6094/2 "2024-08-12T10:44:17Z")

</div>

Hey @Kenz, welcome to the Builder forum.

Are you trying to fetch your products from `http://localhost:9000/wecare/Home/5052d7b3-5e2e-ed11-9db1-000d3a856e52`?  
To achieve this, you can use [Data models](https://www.builder.io/c/docs/models-data) and [Data binding](https://www.builder.io/c/docs/guides/connecting-api-data#connecting-api-data).

### Retrieve Product Information in [Builder.io](http://Builder.io)

1. **Create a Data Model for Products** :

- Ensure that you have a Data Model set up for your products in [Builder.io](http://Builder.io). If not, you can create one by navigating to Models \> Data Model and adding the necessary fields (e.g., Product Name, Description, Price, Image, etc.).

1. **Add Product Entries** :

- Add content entries to the Data Model. Each entry should represent a product, and one of the fields should store the unique ID of the product.

1. **Set Up a Page or Section** :

- Create a new Page or Section in [Builder.io](http://Builder.io) where you would like to display the product information.

1. **Use Custom Query in Visual Editor** :

- In the Visual Editor, you can add dynamic data bindings to query the product information based on the ID.

### Using Visual Editor for Custom Queries

#### Step 1: Add Widgets to Display Product Information

1. **Log in to [Builder.io](http://Builder.io)** and navigate to the content you want to edit.
2. **Drag and Drop Elements** : Add the elements (e.g., text block, image, etc.) where you want to display the product information.

#### Step 2: Bind Data to Elements

1. **Click on the Element** : Click on the element you added (e.g., text block) to open its settings.
2. **Data Tab** : Navigate to the Data tab in the right-side panel.
3. **Add a Custom Query** : Add a custom query to fetch the product data based on the ID from the URL.

Let me know if this helps.

---

<div class="post-metadata">

**Author:** ![Kenz](https://avatars.discourse-cdn.com/v4/letter/k/ee7513/32.png) [@Kenz](https://forum.builder.io/u/Kenz)\
**Post date:** [August 14, 2024, 1:54am UTC](https://forum.builder.io/t/get-id-in-url-in-builder-io/6094/3 "2024-08-14T01:54:10Z")

</div>

Hi @sheema

I currently can pass the product ID into the URL. However, I’m having trouble retrieving that ID value to pass it into the edit query as a parameter.

 ![Screenshot 2024-08-14 084824](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d02ba505d8debd62e57d8bb42d5e2cb3a5f59de8.jpeg)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/8787e4f94167835f4fd0d719194988c515013442.jpeg)

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [August 19, 2024, 4:08am UTC](https://forum.builder.io/t/get-id-in-url-in-builder-io/6094/4 "2024-08-19T04:08:56Z")

</div>

Hey @Kenz if you are using product-id as queryparam i.e. [http://localhost:9000/wecare/Home&product-id=5052d7b3-5e2e-ed11-9db1-000d3a856e52](http://localhost:9000/wecare/Home&product-id=5052d7b3-5e2e-ed11-9db1-000d3a856e52) you need to use JS to fetch the products

```auto
const urlParams = new URLSearchParams(state.location.pathname.split('&')[1]); 
const productId = urlParams.get('product-id');

```

However, If you are passing the product ID like -[http://localhost:9000/wecare/Home/5052d7b3-5e2e-ed11-9db1-000d3a856e52](http://localhost:9000/wecare/Home/5052d7b3-5e2e-ed11-9db1-000d3a856e52) then you can get the product ID from the state directly using the code below.

```auto
productId = state.location.path[2]

```

 ![Screenshot 2024-08-16 at 1.43.51 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/9/9e512d67e0662b40e1de260ef80775ee0dd31764.jpeg)