Ember App Cannot Load Json Data From Local File

I have been following the ember quick start guide to create an app that displays some data (https://guides.emberjs.com/v2.13.0/getting-started/quick-start/) but instead of displayi

Solution 1:

Ember comes with Development server(localhost:4200) and it can't be used like a webserver and it can't be used to response ajax request. You can't make this work Ember.$.getJSON("/products.json") with localhost:4200 endpoint.

You need backend any webserver to return response. If you don't have that at present then for development purpose, you need to work with dynamic render data, then I prefer to use ember-cli-mirage addon.

http://www.ember-cli-mirage.com/docs/v0.3.x/

Solution 2:

What about placing the JSON in the app folder and importing it?

import Ember from 'ember';
import yourData from 'your-app/json-file-name.js';

export default Ember.Route.extend({
  model() {
    return yourData;
  }
});

https://ember-twiddle.com/afb9d71933322860938b3936d617a776 - you can use this to try and get a .json working...

There is a thread here too: https://discuss.emberjs.com/t/how-to-import-data-from-json-file-to-ember-app

BUT... don't expect it to properly be in the ember-data store - and function like you'd expect in many situations.