MAIS AMOR POR FAVOR

SvelteKit JSON Import: use JSON Data in Svelte

SvelteKit Secure Dev Server

SvelteKit JSON Import: use JSON Data in Svelte

SHARE:

πŸ–₯ SvelteKit JSON Import

There are many applications for SvelteKit JSON import. You might be building a client site, for example, and want to let the client update data for certain pages from time-to-time. It could also be a business app you are building which you want to read JSON data updated as part of a regular business process. Leaving aside not being able to add comments, JSON is a great format for storing data and is easily human readable. On top it can be updated without any JavaScript knowledge and little technical experience.

In this short video we see how you can import entire JSON files into your Svelte components. On top, Vite makes it possible to extract certain objects or arrays from JSON and import just what you need, keeping you pages lean. If you're ready to see all that, hit play and sit back!

πŸ“Ή SvelteKit JSON Import: Video

SvelteKit JSON Import

πŸ—³οΈ Poll

What's your β€œgo to” data format?
Voting reveals latest results.

πŸ–₯ SvelteKit JSON Import: Code

index.svelte
svelte
1<script>
2 // import entire JSON file as a default import
3 import people from '$lib/data/people.json';
4
5 // import root level object as a named import
6 import { sponsors } from '$lib/data/clientsSponsors.json';
7
8 import '@fontsource/open-sans/400.css';
9 import '@fontsource/open-sans/700.css';
10
11 const BULLET_ENTITY = '\u2022';
12 const EM_SPACE_ENTITY = '\u2003';
13
14 // we access the root level sponsors element (which is an array) directly in code
15 const sponsorString = sponsors
16 .map((element) => element.name)
17 .join(`${EM_SPACE_ENTITY}${BULLET_ENTITY}${EM_SPACE_ENTITY}`);
18</script>
19
20<svelte:head>
21 <title>About Us</title>
22 <html lang="en-GB" />
23</svelte:head>
24
25<header class="heading">
26 <div class="title">
27 <h1>About Us</h1>
28 </div>
29</header>
30<main>
31 <section class="sponsors">
32 <h2>Our Sponsors</h2>
33 <div class="scrolling-text"><p>{sponsorString}</p></div>
34 </section>
35 <section>
36 <h2>Our People</h2>
37 <div class="people">
38 <!-- We can access the people default import which is an array directly in the code -->
39 {#each people as { firstName, lastName, jobTitle, email }, index}
40 <article aria-posinset={index + 1} aria-setsize={people.length} class="person">
41 <h2>{firstName} {lastName}</h2>
42 <p><strong>{jobTitle}</strong></p>
43 <p>{email}</p>
44 </article>
45 {/each}
46 </div>
47 </section>
48</main>

πŸ™πŸ½ Feedback

If you have found this video useful, see links below for further related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.