首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >AngularJS: factory $http.get JSON文件

AngularJS: factory $http.get JSON文件
EN

Stack Overflow用户
提问于 2013-06-05 10:12:17
回答 2查看 349.1K关注 0票数 84

我希望在本地开发一个硬编码的JSON文件。我的JSON文件如下(放入JSON验证器时有效):

代码语言:javascript
复制
{
    "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和$resource的例子,但是我不知道该怎么做。我在寻找最简单的解决方案。我只是尝试为ng-repeat和类似的指令提取数据。

工厂:

代码语言:javascript
复制
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
});

任何和所有的帮助都是感激的。谢谢!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-06-05 12:33:45

好的,下面是要查看的内容列表:

1)如果您没有运行任何类型的not服务器,而只是使用file://index.html,进行测试,那么您可能会遇到同源策略问题。请参见:

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

许多浏览器不允许本地托管的文件访问其他本地托管的文件。Firefox确实允许这样做,但前提是您加载的文件与html文件(或子文件夹)位于同一文件夹中。

2) $http.get()返回的成功函数已经为您拆分了result对象:

代码语言:javascript
复制
$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {

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

3) success函数不会返回您传递给它的函数的结果,所以这不是您认为它所做的事情:

代码语言:javascript
复制
var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });

这更接近于您的预期:

代码语言:javascript
复制
var mainInfo = null;
$http.get('content.json').success(function(data) {
    mainInfo = data;
});

4)但您真正想要做的是返回一个对象的引用,该对象具有一个属性,该属性将在数据加载时填充,因此类似于:

代码语言:javascript
复制
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并使用它:

代码语言:javascript
复制
theApp.factory('mainInfo', function($http) { 
    return $http.get('content.json');
});

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

代码语言:javascript
复制
$scope.foo = "Hello World";
mainInfo.success(function(data) { 
    $scope.foo = "Hello "+data.contentItem[0].username;
});
票数 218
EN

Stack Overflow用户

发布于 2014-07-22 09:37:04

这个答案对我帮助很大,并为我指明了正确的方向,但对我和其他人有效的是:

代码语言:javascript
复制
menuApp.controller("dynamicMenuController", function($scope, $http) {
$scope.appetizers= [];
$http.get('config/menu.json').success(function(data) { 
    console.log("success!");
    $scope.appetizers = data.appetizers;
        console.log(data.appetizers);
    });    
});
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16930473

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档