how to pass json data from +layout.server.ts to +layout.svelte safely?

[magic-thomas]

I get json data from server and want to display on views.

+layout.server.ts

/** @type {import('./$types').LayoutServerLoad} */
export async function load() {
	let menus = await get_menus();
        console.log(typeof (menus))
	console.log(menus);
	return menus;
}

async function get_menus() {
	let url = 'http://127.0.0.1:3333/api/menus';
	const res = await fetch(url);
	return await res.json();
}

it give me in console.

object
[
    { title: 'Dashboard', link: '/' },
    { title: 'Statics', link: '/statics' },
    { title: 'Support', link: '/supports' },
    { title: 'Login', link: '/auth/login' },
    { title: 'Settings', link: '/settings' }
]

+layout.svelte

<script lang="ts">
	export let data: Object = {};
        console.log( typeof(data))
	console.log(data)
	let menus = data;
</script>

// the menus will be passed to Menu Component

But in +layout.svelte , it gives me this in console.

object
{
    '0': { title: 'Dashboard', link: '/' },
    '1': { title: 'Statics', link: '/statics' },
    '2': { title: 'Support', link: '/supports' },
    '3': { title: 'Login', link: '/auth/login' },
    '4': { title: 'Settings', link: '/settings' }
}

why the Object data is being changed ?

And how can I keep the original json data when passing to svelte ?

[teemingc]

You will need to always return data from a load function as an object. Currently, get_menus() is returning an array of objects.

/** @type {import('./$types').LayoutServerLoad} */
export async function load() {
	let menus = await get_menus();
        console.log(typeof (menus))
	console.log(menus);
-       return menus;
+       return { menus };
}

Now, load is returning an object with the menus key.

Next, we can extract the menus key from data, declare, and set it all at once.

You can also use generated types to get the autocomplete and suggestions for the returned object from load.

<script lang="ts">
+       import type { PageData } from './$types';

-	export let data: Object = {};
+       export let data: PageData;
        console.log( typeof(data))
	console.log(data)
-	let menus = data;
+       $: ({menus} = data);
</script>

[einarpersson]

Question: why would you use reactive declaration $ instead of const here?

Is it just a matter of taste or am I missing something?

[teemingc]

Question: why would you use reactive declaration $ instead of const here?

The general use case is that whenever data changes (when load runs), the declared variable will be updated.

I don't think const can be used because data has not been assigned any value yet. You also don't want it to be stuck on the default value of data if you have one set.

[magic-thomas]

Thank for good solution. But I don't understand why export let data: Object = {}; is not working?

Why 'PageData' should be used? Is it because of typescript ? or sveltekit ?

[teemingc]

Why 'PageData' should be used? Is it because of typescript ? or sveltekit ?

It's helpful because SvelteKit automatically generates the types definition (PageData) based on what you return from the load function. So, you get autocomplete and suggestions for each page :)

[magic-thomas]

really thanks for reply. I could step little more forward to svelte way.