将数据从.json文件加载到Angular工厂中

Question

我有一个工厂，可以从数组中加载数据，或者从这个数组中选择元素。但如果我把它移动到外部的.json文件中，就会出现错误 - 我是一个 Angular 新手，一直在努力学习，请您谅解^^。 因此，如果我使用简单的

标签，我需要如何在 Angular 中正确地加载和使用 .json 文件？

$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。 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;
      }
  };

- CreativeZoller

---

由于我无法让它正常工作，无论我尝试从外部网站获取什么，我仍在寻找一个好的解决方案，将 .json 内容转换为工厂内的数组 ^^ - CreativeZoller

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变量在技术上不起作用，因为它是一个不在同一范围内的局部变量。逻辑上也行不通，因为$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;
}

- Amir Popovich

---

谢谢Amir，原始问题已经更新，请确认 :) - CreativeZoller

谢谢 :) 现在我认为有一些JSON解析错误，因为尽管在线的JSON验证器说我的JSON合法，但它似乎并不合法 :/ “SyntaxError：Unexpected token at Object.parse（native）” - CreativeZoller

好的，我更新了Plunker并尝试调查它返回的作用域...我得到了一个更大的对象，其中包含所需的内容的子对象。但是..如何访问它们？:s 抱歉，但如果我尝试将其作为数组元素或类似元素，则无法访问。 - CreativeZoller

Answer 2

你可以使用Angular Resource：

angular.module('portApp').factory('Port', function ($resource) {
    return $resource('ports.json');
});

- Lionel Nguyen

Answer 3

来自另一个 Stack Overflow 的帖子：

theApp.factory('mainInfo', function($http) { 

    var obj = {content:null};

    $http.get('content.json').success(function(data) {
        // you can do some processing here
        obj.content = data;
    });    

    return obj;    
});

您可以在这里看到它:
AngularJS: factory $http.get JSON文件

- Marin Takanov

Answer 4

你在 $http.get 中忘记了 function 关键字，同时也使用了错误的变量名

$http.get('ports.json').then(function(res) { // <--- THIS
    var works = res.data;
});

- Andy