Ember 应用程序无法从本地文件加载 json 数据答案

【问题标题】：Ember app cannot load json data from local fileEmber 应用程序无法从本地文件加载 json 数据
【发布时间】：2017-07-08 15:34:48
【问题描述】：

我一直在按照 ember 快速入门指南创建一个显示一些数据 (https://guides.emberjs.com/v2.13.0/getting-started/quick-start/) 的应用程序，但我想显示来自以下 json 的产品，而不是只显示带有科学家姓名的 javascript 数组。

我已经将json文件放到了public文件夹中。

看起来像：

{
  "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");
    }
});

我完全按照教程操作，除了

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

scientists.js 中的行。我的数据没有显示，我在 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 也很陌生。任何帮助表示赞赏！谢谢！

【问题讨论】：

标签： javascript jquery json ember.js

【解决方案1】：

Ember 带有开发服务器(localhost:4200)，它不能像 web 服务器一样使用，也不能用来响应 ajax 请求。 Ember.$.getJSON("/products.json") 无法使用 localhost:4200 端点完成这项工作。

您需要后端任何网络服务器来返回响应。如果您目前没有，那么出于开发目的，您需要使用动态渲染数据，那么我更喜欢使用ember-cli-mirage插件。

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

【讨论】：

【解决方案2】：

将 JSON 放在 app 文件夹中并导入怎么样？

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 存储中 - 并且在许多情况下会像您期望的那样运行。

【讨论】：

我为这个应用程序构建的所有“故事”数据都是从应用程序目录中的静态文件加载的 / 所以我知道可以使用这样的东西。 judge.justicefor.us
您可能需要重新格式化 JSON 以使其对 Ember 友好
你的意思是第 2 行：从 'your-app/json-file-name.json' 导入 yourData
@yiannis - 就我而言，我将“类似 JSON”的数据放在标准 JS 文件中。好点子。我没有用标准的 JSON 文件尝试过。