將.json文件中的數據加載到Angular中的工廠中

Question

我有一個工廠從數組加載數據，或從這個數組中選擇一個元素。 但是，如果我將它移動到外部.json文件，我只是得到錯誤 - 我是新手，除了努力之外，還要努力，記住^^所以，如果我使用簡單

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

代碼，我得到“ReferenceError：works 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;
      }
  };

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在回調函數中創建一個局部var。 你不能在外面訪問它。 另外將res更改為portRes 。

3.返回works 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;
}

Answer 2

你可以使用角度資源：

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

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：工廠$ http.get JSON文件

Answer 4

您忘記了$http.get的function關鍵字以及錯誤的變量名稱

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