json - AngularJS:工厂 $http.get JSON 文件

我希望仅使用硬编码的 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 在工厂内被硬编码时,我的 Controller 、工厂和 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
});

我们不胜感激。谢谢!

最佳答案

好的,以下是要调查的事项列表:

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) {

所以用function(response)调用success并返回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');
});

然后您可以在 Controller 的计算中异步使用该值:

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

https://stackoverflow.com/questions/16930473/

相关文章:

c# - 解析值时遇到意外字符

jquery - 为什么找不到我的 json 文件?

json - react-native 如何从本地JSON文件中获取数据?

json - 在 VS Code 中,禁用错误 "Comments are not permitte

c# - DataContractJsonSerializer 和 JavaScriptSerial

sql - 查询 JSON 类型内的数组元素

json - 如何使用 curl 将 json 对象与数组一起放置

python - 如何在单元测试中使用 JSON 发送请求

javascript - 未捕获的类型错误 : Cannot use 'in' operator t

json - 如何使用 jq 从 JSON 中获取键名