• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Loading JSON Files in Aurelia

Aurelia 1 · February 18, 2016

At the time of writing this, the preferred approach to client side dependencies and loading is Jspm which is one part package manager and one part SystemJS loader polyfill.

Although, we will be seeing other loader options in the near future such as Webpack and even a potential custom loader from the Aurelia team. But for now we have Jspm and System.js.

Install the JSON loader for System.js

We can use the JSON loader for System.js to load JSON files in our app in a bulletproof way. You can view the plugin here and see that it is really quite simple under the hood.

To install it in your application, ensure you have run npm install and jspm install for your previous dependencies. Then install the JSON plugin by running: jspm install json

Then you can use it in your Aurelia application like-so:

import * as myJson from 'jsonfile.json!json';

Notice we use the wildcard * and the as keyword? This is because if a file has no default export, we essentially have to create one. There might be other ways to include JSON such as using require but we will stick to using import for the sake of this article.

Conclusion

That’s it. There is nothing complex here. Simply install the loader plugin for System.js and the rest takes care of itself. Things to remember are your JSON files need to be properly formatted as JSON or you will encounter issues.

Dwayne

Leave a Reply Cancel reply

4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
VagyokC4
VagyokC4
7 years ago

Question, I’m running a dotNET Core 1.0 application, and I would like to load my “appSettings.json” file which sits in a folder separate from the index.html file. How do I load this json file? What path do I use?

0
VagyokC4
VagyokC4
7 years ago

Ok, so I think I know why what I was trying to do won’t work…. Is this able to hit a controller action that returns valid json?

0
Aviram Dayan
Aviram Dayan
6 years ago

so, it there other plugins to also load resources like csv/xml/…?
thanks

0
Bruno Delgado
Bruno Delgado
6 years ago

Not working with me.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • ChatGPT Stopping Part Way Through a Response? Here Is How You Fix It
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Mock uuid In Jest

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz