• 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
6 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
6 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
5 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
  • Web 3.0 may have died before it even started
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Calculate A Javascript Date X Months Ago With Vanilla Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • Which Neural DSP Archetype Plugins Should You Buy?

Recent Comments

  • Casey Milne on A List of WordPress Gutenberg Core Blocks
  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz