Ember app cannot load json data from local file

@yiannissakk wrote:

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 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!

Posts: 3

Participants: 3

Read full topic