AngularJS:factory $ http.get JSON文件问题如何解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (105)

我正在寻找只用硬编码的JSON文件进行本地开发。我的JSON文件如下(放入JSON验证器时有效):

{
    "contentItem": [
            {
            "contentID" : "1", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        },{
            "contentID" : "2", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        }
    ]
}

当JSON在工厂内硬编码时,我已经获得了控制器,工厂和html的工作。但是,现在我已经用$ http.get代码替换了JSON,它不起作用。我已经看到$ http和$资源的很多不同的例子,但不知道要去哪里。我正在寻找最简单的解决方案。我只是想为ng-repeat和类似的指令提取数据。

factory:

theApp.factory('mainInfoFactory', function($http) { 
    var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });
    var factory = {}; // define factory object
    factory.getMainInfo = function() { // define method on factory object
        return mainInfo; // returning data that was pulled in $http call
    };
    return factory; // returning factory to make it ready to be pulled by the controller
});
提问于
用户回答回答于

好的,这里有一些需要研究的内容:

1)如果没有运行任何类型的网络服务器,只需使用file://index.html进行测试,那么可能遇到了同源策略问题。看到:

https://code.google.com/archive/p/browsersec/wikis/Part2.wiki#Same-origin_policy

许多浏览器不允许本地托管文件访问其他本地托管文件。Firefox确实允许,但前提是你要加载的文件与html文件(或子文件夹)包含在同一个文件夹中。

2)从$ http.get()返回的成功函数已经为你分割结果对象:

$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {

所以用函数调用成功(响应)并返回response.data是多余的。

3)成功函数不返回你传递它的函数的结果,所以这不符合你的想法:

var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });

这更接近你的意图:

var mainInfo = null;
$http.get('content.json').success(function(data) {
    mainInfo = data;
});

4)但是你真正想要做的是返回一个对象的引用,该对象的属性在数据加载时将被填充,所以像这样:

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

mainInfo.content将从null开始,并且当数据加载时,它将指向它。

或者,可以返回$ http.get返回的实际承诺并使用该承诺:

theApp.factory('mainInfo', function($http) { 
    return $http.get('content.json');
});

然后,可以在控制器中的计算中异步使用该值:

$scope.foo = "Hello World";
mainInfo.success(function(data) { 
    $scope.foo = "Hello "+data.contentItem[0].username;
});
用户回答回答于

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

obj在接收数据之前它总会被返回(因此值总是null),这是因为我们正在进行异步调用。

在Angular中,$promise当你想进行异步调用时,用它来处理提取的数据。

最简单的版本是

theApp.factory('mainInfo', function($http) { 
    return {
        get:  function(){
            $http.get('content.json'); // this will return a promise to controller
        }
});


// and in controller

mainInfo.get().then(function(response) { 
    $scope.foo = response.data.contentItem;
});

我不使用的原因successerror是我刚刚从发现的文档,这两种方法已被弃用。

$http遗产的承诺方法成功和错误已被弃用。改用标准then方法。

扫码关注云+社区