2017-07-08 13 views
1

データを表示するアプリを作成するにはemberクイックスタートガイドに従っていますが、科学者の名前のjavascript配列を表示する代わりに、次のjsonから。Emberアプリケーションはローカルファイルからjsonデータを読み込むことができません

jsonファイルをパブリックフォルダに配置しました。

それは次のようになりますように

{ 
    "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" 
     }, 

と。

import Ember from 'ember'; 

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

を次のように

リストを表示するためのルートのモデルのための私のコードは私は正確にscientists.jsで

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

ライン以外のチュートリアルに従ってきました。私のデータが表示されておらず、Emberの検査官のエラーは

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 

です。私はemberでかなり新しく、jsでかなり新しいです。どんな助けにも感謝!ありがとう!

答えて

1

Emberには開発サーバー(localhost:4200)が付属しており、Webサーバーのように使用することはできず、ajax要求への応答にも使用できません。この作業をlocalhost:4200エンドポイントでEmber.$.getJSON("/products.json")にすることはできません。

応答を返すには、Webサーバーをバックエンドする必要があります。現在は開発目的のためにそれを持っていない場合は、 の動的レンダリングデータで作業する必要があります。ember-cli-mirage addonを使用することをお勧めします。

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

0

何appフォルダにJSONを配置し、それをインポートについて?

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 - あなたは.json作業をしようとして取得するためにこれを使用することができます...スレッドはここにも

あり: https://discuss.emberjs.com/t/how-to-import-data-from-json-file-to-ember-app

しかし...それを期待していませんあなたが多くの状況で期待していたように、ember-data storeに正しく入ることができます。

+0

私が作成したこのアプリのすべての 'ストーリー'データは、アプリディレクトリ内の静的ファイルからロードされていたので、このようなことをすることは可能です。 http://judge.justicefor.us/ – sheriffderek

+0

EmberフレンドリーになるようにJSONを再フォーマットする必要があります – sheriffderek

+0

2行目を意味しましたか: your-app/json-file-name.jsonからyourDataをインポートします。 – Yiannis

関連する問題