程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS:工厂$ http.get JSON文件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决AngularJS:工厂$ http.get JSON文件?

开发过程中遇到AngularJS:工厂$ http.get JSON文件的问题如何解决?下面主要结合日常开发的经验,给出你关于AngularJS:工厂$ http.get JSON文件的解决方法建议,希望对你解决AngularJS:工厂$ http.get JSON文件有所启发或帮助;

好的,这是要研究的事项列表:

1)如果您没有运行任何类型的Web服务器,而只是使用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) {

因此,使用function(response)调用成功并返回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;    
});
@H_821_2@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;
});

解决方法

我希望仅使用硬编码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","seriesnumber" : "2","seriestitle" : "How to Play Guitar" }
            ]
        },{
            "contentID" : "2","seriestitle" : "How to Play Guitar" }
            ]
        }
    ]
}

当JSON在工厂内部进行硬编码时,我已经使控制器,工厂和html正常工作。但是,现在我已经用$
http.get代码替换了JSON,它不起作用了。我已经看过$ http和$
resource的许多不同示例,但不确定去哪里。我正在寻找最简单的解决方案。我只是想为ng-repeat和类似指令提取数据。

厂:

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

任何和所有帮助表示赞赏。谢谢!

大佬总结

以上是大佬教程为你收集整理的AngularJS:工厂$ http.get JSON文件全部内容,希望文章能够帮你解决AngularJS:工厂$ http.get JSON文件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。