Ember app cannot load json data from local file

1

I have been following the ember quick start guide to create an app that displays some data (Quick Start - Getting Started - Ember Guides) but instead of displaying just a javascript array with scientists names, I want to display the products from the following json.

I have placed the json file in the public folder.

It looks like:

{
  "products": [
    {
      "_id": "58ff60ffcd082f040072305a",
      "slug": "apple-tree-printed-linen-butterfly-bow-tie",
      "name": "Apple Tree Printed Linen Butterfly Bow Tie ",
      "description": "This fun 40 Colori Apple Tree Printed Linen Butterfly Bow Tie features a design of various apple trees built from tiny polka dots. The back of this bow tie features a polka dot print in complementing colours which when the bow tie is tied will pop out from behind making for a subtle yet unique detail. The playful design, stand out natural linen texture, and colourful combinations make this bow tie a perfect accessory for any outfit!\n",
      "standard_manufacturer": "58cbafc55491430300c422ff",
      "details": "Size: Untied (self-tie) bow tie with an easily adjustable neck strap from 13-3/4'' to 19'' (35 to 48 cm)\nHeight: 6 cm\nMaterial: Printed 100% linen\nCare: Dry clean\nMade in Italy",
      "sizes": [
        {
          "value": "Violet",
          "size": "57722c80c8595b0300a11e61",
          "_id": "58ff60ffcd082f0400723070",
          "marked_as_oos_at": null,
          "quantity": -1,
          "stock": true,
          "id": "58ff60ffcd082f0400723070"
        },

and so on.

My code for the model of the route for displaying the list is as follows

import Ember from 'ember';

export default Ember.Route.extend({
	model() {
		//return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
		return Ember.$.getJSON("/products.json");
	}
});

I have followed the tutorial exactly except for the

return Ember.$.getJSON("/products.json");

line in scientists.js. My data is not being displayed and the error i get in the ember inspector is

compiled.js:2 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at E (compiled.js:2)
    at Object.u (compiled.js:25)
    at compiled.js:25
E	@	compiled.js:2
u	@	compiled.js:25
(anonymous)	@	compiled.js:25

I am very new with ember and fairly new with js. Any help appreciated! Thanks!

2

Hi @yiannissakk it doesn’t sound like the getJSON call is the issue here. The stack trace makes it look kinda like there’s an issue with one of the ember packages or a syntax error in another file. Have you installed any non-default addons or npm packages? And if not can you post some of your other controller/template code too?

3

hi there, I’ve recently needed to load some JSON statically into an app I’m working on and opted for exporting the JSON blob as a JS module and imported the file as I’d normally do load modules as opposed to placing such JSON in the public directory. What’s the difference here, or rather the pros and cons, if someone would be kind to give a short answer :slight_smile: