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
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');
}
}<script>
export let data;
console.log(data.matchingPost);
</script>
<main>
<!-- code here -->
</main>{
"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
}
]
}Last updated