> For the complete documentation index, see [llms.txt](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://132oq-szjxckld--diwejk1k2j-1123n.gitbook.io/documentation-studio-shento/sveltekit-server-fetching-and-deployment/finding-correct-query-in-api-based-on-url-slug.md).

# Finding correct query in api based on url slug

This code is an asynchronous JavaScript function that fetches project data from an external API and processes it to find a specific project based on a URL-friendly version of its name. Here’s a summar

Replace `Name_Project` with your own name in your api

{% tabs %}
{% tab title="routes/werk/\[slug]/+page.js" %}
{% code title="\[slug]/+page.js" %}

```javascript
import { error } from '@sveltejs/kit';
import { MakeUrlFriendly } from '$lib/utils.js';

export async function load({ fetch, params }) {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    let posts = data.data;
    let matchingPost = posts.find((matchingPost) => MakeUrlFriendly(matchingPost.name) === params.slug);
    return { matchingPost };
  } catch (e) {
    console.error('Error fetching data:', e);
    throw error(500, 'Error fetching data from API');
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="routes/werk/\[slug]/+page.svelte" %}

```html
<script>
	export let data;
	console.log(data.matchingPost);
</script>

<main>
	<!-- code here -->
</main>
```

{% endtab %}

{% tab title="api" %}

```json
{
  "data": [
    {
      "id": 1,
      "sort": null,
      "date_created": "2024-07-25T08:58:03.569Z",
      "Name_Project": "Prosifier",
      "rol_en_service": "Design & Development",
      "Jaar": "2022",
      "urlsite": null,
      "featuredImage": "9e0a5de1-1605-4441-b08b-a100d35b76c9",
      "footage1": "9e0a5de1-1605-4441-b08b-a100d35b76c9",
      "footage2": "9e0a5de1-1605-4441-b08b-a100d35b76c9",
      "footage3": "9e0a5de1-1605-4441-b08b-a100d35b76c9",
      "mobilescreenshot1": "9e0a5de1-1605-4441-b08b-a100d35b76c9",
      "mobilescreenshot2": "9e0a5de1-1605-4441-b08b-a100d35b76c9"
    },
    {
      "id": 2,
      "sort": null,
      "date_created": "2024-07-25T15:30:34.110Z",
      "Name_Project": "Berg & Bos",
      "rol_en_service": "Design",
      "Jaar": "2024",
      "urlsite": null,
      "featuredImage": "5df29114-2660-4192-bf72-4c26087d9264",
      "footage1": "4370768a-5ecf-4398-ab27-ac58300b94c4",
      "footage2": "8162fd4b-83c7-40c5-9134-a2e8ac9ecb33",
      "footage3": "c3abc53e-24c7-41fb-938a-516971ff98c4",
      "mobilescreenshot1": null,
      "mobilescreenshot2": null
    }
  ]
}
```

{% endtab %}
{% endtabs %}