javascript - 将 .json 文件中的数据加载到 Angular 中的工厂中

Question

我有一个工厂，它从数组中加载数据，或者从这个数组中加载一个选定的元素。但是，如果我将它移动到外部 .json 文件，我只会收到错误消息——我是 angular 的新手，但要努力尝试，请记住 ^^所以如果我使用简单的

$http.get('ports.json').success (function(data){
  var works = data;
});

代码，我得到“ReferenceError: works is not defined”。如果我尝试

$http.get('ports.json').then((portRes){
    var works = res.data;
});

我收到“Uncaught SyntaxError: Unexpected token {”错误。但是那个代码不是工厂，而是在一个完全不同的页面上工作，所以现在不知道出了什么问题:/这是 .json 文件，@链接，你可以检查 plunker。柱塞 - http://plnkr.co/edit/tMrJMjzc4pl7fQ1PIEiO?p=info

[
  {
    "Title": "Sprite",
    "subTitle": "",
    "Link": "sprite",
    "Thumbnail": "img/portfolio02.png",
    "Image": "img/ismont.png"
  },
  {
    "Title": "Pepsi",
    "subTitle": "Kristályvíz",
    "Link": "pepsi",
    "Thumbnail": "img/portfolio03.png",
    "Image": "img/sanofimont.png"
  }
]

编辑:所以我尝试了你到目前为止写的所有内容，但似乎没有任何效果......所以我现在有了工作良好的因素，我想将其传输到外部 .json 文件，以便非常清楚地理解。

  portApp.factory("workFactory", function($http) {  
  var works = [
  {
      Title: "Sprite",
      subTitle: "",
      Link: "sprite",
      Thumbnail: "img/portfolio02.png",
      Image: "img/ismont.png"
  },
  {
      Title: "Pepsi",
      subTitle: "Kristályvíz",
      Link: "pepsi",
      Thumbnail: "img/portfolio03.png",
      Image: "img/sanofimont.png"
  }
  ];
  return {
      list: function() {
          return works;
      },
      selected: function(detPath) {
          selected = works.filter(function(work) {
              return work.Link == detPath;
          });
          return selected;
      }
  };

Answer 1

您发布的 Plunker 有很多问题。

但主要问题在于这段代码:

portApp.factory("workFactory", function($http) {
        $http.get('ports.json').then((portRes) {
            var works = res.data;
        });
        return {
            list: function() {
                return works;
            },
            selected: function(detPath) {
                selected = works.filter(function(work) {
                    return work.Link == detPath;
                });
                return selected;
            }
        };
    });

问题:
1. then 方法需要一个函数。将 (portRes) 更改为 function(portRes)。

2. 执行 var works = res.data 在回调函数中创建一个局部变量。你不能在外面访问它。另外，将 res 更改为 portRes。

3. 返回 works var 在技术上是行不通的，因为它是一个不在同一范围内的本地 var。它不会按逻辑工作，因为 $http.get 是一个异步进程，您不知道它何时完成。

编辑:
在你编辑之后，我相信你需要这样的东西(我没有检查这个所以可能会有一些错误，但这是做事的方式):

portApp.factory("workFactory", function($http) {      
    var state = {
          works: null,

          list: function() {
              return this.works;
          },

          selected: function(detPath) {
              return this.works.filter(function(work) {
                  return work.Link == detPath;
              });
          }
    };

    $http.get('myJson.json').success(function(data) {
        state.works = data;
    }); 

    return state;
}