AngularJS：工厂$ http.get JSON文件 [英] AngularJS: factory $http.get JSON file

问题描述

我期待与刚刚硬codeD JSON文件在本地发展。我的JSON文件如下（有效期如果电池JSON验证）：

I am looking to develop locally with just a hardcoded JSON file. My JSON file is as follows (valid when put into JSON validator):

{

    "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" }
            ]
        }

    ]

}

我已经得到我的控制器，工厂，和HTML工作时，JSON是在工厂里面辛苦codeD。但是，现在，我已经替换为$ http.get code中的JSON，这是行不通的。我见过$ http和$资源，但不知道去哪里都这么多不同的例子。我正在寻找最简单的解决方案。我只是试图拉为NG-重复和相似的指令数据。

I've gotten my controller, factory, and html working when the JSON was hardcoded inside the factory. However, now that I've replaced the JSON with the $http.get code, it doesn't work. I've seen so many different examples of both $http and $resource but not sure where to go. I'm looking for the simplest solution. I'm just trying to pull data for ng-repeat and similar directives.

厂址：

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

});

任何及所有帮助AP preciated。谢谢！

Any and all help is appreciated. Thanks!

推荐答案

好吧，这里的东西要寻找到一个列表：

Okay, here's a list of things to look into:

1）如果你没有运行任何类型的网络服务器和只是文件测试：//index.html，那么你很可能运行到同一产地的政策问题。参见：

1) If you're not running a webserver of any kind and just testing with file://index.html, then you're probably running into same-origin policy issues. See:

<一个href=\"http://$c$c.google.com/p/browsersec/wiki/Part2#Same-origin_policy\">http://$c$c.google.com/p/browsersec/wiki/Part2#Same-origin_policy

许多浏览器不允许在本地托管的文件访问其他本地托管的文件。 Firefox没有允许它，但只有当你正在加载的文件包含在同一文件夹中的HTML文件（或子文件夹）。

Many browsers don't allow locally hosted files to access other locally hosted files. Firefox does allow it, but only if the file you're loading is contained in the same folder as the html file (or a subfolder).

2）的成功，函数从$ http.get（）返回已经分裂了结果对象为您提供：

2) The success function returned from $http.get() already splits up the result object for you:

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

所以它是多余的调用与功能（反应）成功并返回response.data。

So it's redundant to call success with function(response) and return response.data.

3）成功函数不返回给它传递函数的结果，所以这不会做你认为它的作用：

3) The success function does not return the result of the function you pass it, so this does not do what you think it does:

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

这是更接近你打算什么：

This is closer to what you intended:

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

4），但你真的想要做的是返回的对象引用与将填充物业时的数据加载，所以像这样的：

4) But what you really want to do is return a reference to an object with a property that will be populated when the data loads, so something like this:

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将开始为空，而当数据加载，这将指向它。

mainInfo.content will start off null, and when the data loads, it will point at it.

另外，您可以返回实际的诺言$ http.get回报和使用：

Alternatively you can return the actual promise the $http.get returns and use that:

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

然后你就可以在异步计算控制器中使用的值：

And then you can use the value asynchronously in calculations in a controller:

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

这篇关于AngularJS：工厂$ http.get JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！