AngularJS：factory $http.get JSON文件

发布时间：2020-12-17 09:08:46 所属栏目：安全来源：网络整理

导读：我正在寻找本地开发只有一个硬编码的JSON文件。我的JSON文件如下(当放入JSON验证器时有效)： { "contentItem": [ { "contentID" : "1","contentVideo" : "file.mov","contentThumbnail" : "url.jpg","contentRating" : "5","contentTitle" : "Guitar Lessons

我正在寻找本地开发只有一个硬编码的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" }
            ]
        }
    ]
}

我已经得到我的控制器，工厂和html工作时，JSON在工厂硬编码。但是，现在我已经用$ http.get代码替换了JSON，它不工作。我看过这么多不同的例子的$ http和$资源，但不知道去哪里。我在寻找最简单的解决方案。我只是试图拉取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
});

任何和所有的帮助是赞赏。谢谢！

好吧，这里有一些要研究的事情：

1)如果你没有运行任何类型的web服务器，只是使用file：//index.html测试，那么你可能会遇到同源策略问题。看到：

http://code.google.com/p/browsersec/wiki/Part2#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返回的实际promise，并使用：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!