Displaying Fetched Data in a Each Loop

+page.svelte

<script>
	export let data;

	// Utility function to get the image URL
	function getImageUrl(id) {
		return `https://example.nl/assets/${id}?key=compression`;
	}

	function MakeUrlFriendly(input) {
		return input.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase();
	}
</script>

{#each data.data as post}

{/each}

+page.svelte

<script>
	export let data;

	// Utility function to get the image URL
	function getImageUrl(id) {
		return `https://example.nl/assets/${id}?key=compression`;
	}

	function MakeUrlFriendly(input) {
		return input.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase();
	}
</script>

{#each data.data as post}
<div>{post.title}</div>
{/each}

+page.js

export async function load() {
	try {
		const res = await fetch('https://admin.studioshento.nl/items/projects');
		if (!res.ok) {
			throw new Error(`Failed to fetch: ${res.status} ${res.statusText}`);
		}
		const json = await res.json();
		return {
			data: json.data
		};
	} catch (error) {
		console.error('Error loading projects:', error);
		return {
			data: [],
		};
	}
}