Importing JSON Files and Objects in Svelte

November 12, 2021 - 1 minute read

Consider the following data.json file:

{
    "fruit": "apple",
    "color: "red"
}

Here is an example Svelte component which imports data.json as an object called item:

<script>
    import item from 'path/to/data.json';
</script>

<!-- The "item" variable can be treated like a parsed object: -->

{item.fruit} <!-- prints "apple" -->

{item.color} <!-- prints "color" -->

Sometimes, you might want to just import the value of a root-level key from a JSON file, without importing the whole file.

To do this, you can place the top-level key in brackets in your import statement, like this:

<script>
    import { fruit } from 'path/to/data.json';
</script>

{fruit} <!-- prints "apple" -->

Keep in mind that the above examples have been tested in SvelteKit and might not work with out-of-the-box other Svelte environments or versions, depending on your bundler setup.

For example, if you’re using Svelte with Rollup, you might need to use a plugin like rollup-plugin-json.

Conclusion

Anyway, this is the technique I use to pull JSON data from local files within my Svelte components, and I hope it helped you!

Link to this section Conclusion

Conclusion