SvelteKit JSON Import: use JSON Data in Svelte # SvelteKit JSON Import: use JSON Data in Svelte #

📹 SvelteKit JSON Import: Video #

🖥 SvelteKit JSON Import: Code #

    
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 = '•';
12   const EM_SPACE_ENTITY = ' ';
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 </svelte:head>
23  
24 <header class="heading">
25   <div class="title">
26     <h1>About Us</h1>
27   </div>
28 </header>
29 <main>
30   <section class="sponsors">
31     <h2>Our Sponsors</h2>
32     <div class="scrolling-text"><p>{sponsorString}</p></div>
33   </section>
34   <section>
35     <h2>Our People</h2>
36     <div class="people">
37       <!-- We can access the people default import which is an array directly in the code -->
38       {#each people as { firstName, lastName, jobTitle, email }, index}
39         <article aria-posinset={index + 1} aria-setsize={people.length} class="person">
40           <h2>{firstName} {lastName}</h2>
41           <p><strong>{jobTitle}</strong></p>
42           <p>{email}</p>
43         </article>
44       {/each}
45     </div>
46   </section>
47 </main>

  

Bonus: Typed JSON imports #

You can get types from imported JSON by updating the jsconfig.json or tsconfig.json file in the project root folder. Just add the two highlighted lines:

    
1 {
2   "compilerOptions": {
3     "baseUrl": ".",
4     "paths": {
5       "$lib": ["src/lib"],
6       "$lib/*": ["src/lib/*"]
7     },
8     "resolveJsonModule": true,
9     "esModueInterop": true
10   },
11   "extends": "./.svelte-kit/tsconfig.json",
12   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
13 }

  

🔗 SvelteKit JSON Import: Links #

• Starting out Svelte and SvelteKit tutorial ,
• Video on Svelte each blocks,
• Full code for the demo site ,
• Vite docs on JSON ,
• Mockaroo test data generation ,
• Svelte docs on each blocks 

🏁 Readable and Writable Svelte Stores: Summary #

Can you import local JSON files into Svelte components? #

Yes. SvelteKit uses Vite tooling which lets you import JSON files in addition to, for example, all file in a folder matching a pattern (glob imports). Unlike glob imports, there are no promises involved, and you can import an entire JSON file as a default import using the regular syntax: import data from '../data.json'. If you only need part of the file, you can also use a named import to import root level elements from the JSON file.

How do you import part of a JSON file in Vite? #

You can import the entire JSON file as the default export. Alternatively, you can import any root level element as a named import. For example, if the JSON file structure is { sponsors: ['sponsor1', 'sponsor2'], clients: ['client1', 'client2']}, both sponsors and clients are root level arrays. You can import either of these as a named import into a Svelte component file, for example, using SvelteKit. That is because SvelteKit uses Vite tooling. The import syntax is just what you will already be familiar with, e.g. import { clients, sponsors } from '../data.json';. Importing named imports in this way can be more efficient as it helps with tress shaking. Tree shaking is just the process of eliminating unused or dead code, to keep apps as lean as they can be.

How do you get types on imported JSON in SvelteKit? #

SvelteKit supports JSON imports out-of-the-box. To get types on the imported JSON though, you just need to add a couple of lines of code to `jsconfig.json` or `tsconfig.json` (whichever you have in your project). With those changes, you will get in-editor type checking and be able to display the type of an imported JSON variable by hovering over it. To get this working, just add these two lines under compiler options: `"resolveJsonModule": true,` and `"esModueInterop": true`.

What are the advantages of using JSON input data with SvelteKit? #

JSON is easy to read and understand, even by people with little technical expertise. It is also a popular data output format for business apps. Accepting JSON input data can make your app more useful to an end client, allowing them to update inputs themselves, without coding knowledge. There may be small data inputs which live outside a more formal CMS. When these inputs need updating from time-to-time JSON is a nice choice. An example might be the office locations for a small business on their brochure site.

🙏🏽 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.

Rodney

@askRodney

Just updated the video where we take a look at Vite JSON imports in more detail.

We now use the new SvelteKit routing API.

Hope you find it useful!

#askRodneyhttps://t.co/zDf0vmdrfA

— Rodney (@askRodney) October 17, 2022

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 Optimization among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.