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

时间:2015-04-13 08:12:04

标签: javascript json angularjs

我有一个工厂,它从数组加载数据,或者从这个数组中加载一个选定的元素。但是,如果我将它移动到外部.json文件,我只是得到错误 - 我是新手角色,但努力,记住^^ 所以,如果我使用简单的

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

代码,我得到“ReferenceError:工作未定义”。如果我尝试

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

4 个答案:

答案 0 :(得分:5)

你发布的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;
}

答案 1 :(得分:0)

您可以使用角度资源:

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

答案 2 :(得分:0)

来自另一个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 file

答案 3 :(得分:0)

您忘记了function中的$http.get关键字以及错误的变量名称

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