AngularJS:工厂$ http.get JSON文件

时间:2013-06-05 02:12:17

标签: json http angularjs factory

我希望只使用硬编码的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在工厂内进行硬编码时,我已经得到了我的控制器,工厂和html。但是,现在我已经用$ 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
});

感谢任何和所有帮助。谢谢!

5 个答案:

答案 0 :(得分:218)

好的,这里有一系列要研究的内容:

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

因此,使用函数(响应)调用成功并返回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返回的实际承诺并使用:

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

答案 1 :(得分:21)

我想注意接受答案的第四部分是错误的

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

@Karl Zilles编写的上述代码将失败,因为obj将始终在接收数据之前返回(因此值始终为null),这是因为我们正在创建异步调用。

this post

中讨论了类似问题的详细信息

在Angular中,当您想要进行异步调用时,使用$promise来处理获取的数据。

最简单的版本是

theApp.factory('mainInfo', function($http) { 
    return {
        get:  function(){
            $http.get('content.json'); // this will return a promise to controller
        }
});


// and in controller

mainInfo.get().then(function(response) { 
    $scope.foo = response.data.contentItem;
});

我不使用successerror的原因是我刚从doc中找到的,这两种方法已被弃用。

  

已弃用$http遗留承诺方法成功与错误。改为使用标准then方法。

答案 2 :(得分:4)

这个答案帮助了我很多,并指出了我正确的方向,但对我有用的,希望是其他人,是:

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

答案 3 :(得分:1)

我有大概这些问题。我需要从Visual Studio 2013调试AngularJs应用程序。

默认情况下,IIS Express限制访问本地文件(如json)。

但是,首先:JSON具有JavaScript语法。

第二:允许使用javascript文件。

所以:

  1. 将JSON重命名为JS(data.json->data.js)。

  2. 正确加载命令($http.get('App/data.js').success(function (data) {...

  3. 将脚本data.js加载到页面(<script src="App/data.js"></script>

  4. 接下来以通常的方式使用加载的数据。当然,这只是解决方法。

答案 4 :(得分:1)

++ 这对我有用。它是vanilla javascirpt,适用于使用ngMocks库进行测试时的去杂乱等用例:

<!-- specRunner.html - keep this at the top of your <script> asset loading so that it is available readily -->
<!--  Frienly tip - have all JSON files in a json-data folder for keeping things organized-->
<script src="json-data/findByIdResults.js" charset="utf-8"></script>
<script src="json-data/movieResults.js" charset="utf-8"></script>

这是包含javascript数据

JSON文件
// json-data/JSONFindByIdResults.js
var JSONFindByIdResults = {
     "Title": "Star Wars",
     "Year": "1983",
     "Rated": "N/A",
     "Released": "01 May 1983",
     "Runtime": "N/A",
     "Genre": "Action, Adventure, Sci-Fi",
     "Director": "N/A",
     "Writer": "N/A",
     "Actors": "Harrison Ford, Alec Guinness, Mark Hamill, James Earl Jones",
     "Plot": "N/A",
     "Language": "English",
     "Country": "USA",
     "Awards": "N/A",
     "Poster": "N/A",
     "Metascore": "N/A",
     "imdbRating": "7.9",
     "imdbVotes": "342",
     "imdbID": "tt0251413",
     "Type": "game",
     "Response": "True"
};

最后,在代码中的任何位置使用JSON数据

// working with JSON data in code
var findByIdResults = window.JSONFindByIdResults;

注意: - 这非常适合测试,甚至karma.conf.js接受这些文件来运行测试,如下所示。另外,我建议仅将此用于去杂乱数据和testing/development环境。

// extract from karma.conf.js
files: [
     'json-data/JSONSearchResultHardcodedData.js',
     'json-data/JSONFindByIdResults.js'
     ...
]

希望这有帮助。

++ 建立在这个答案之前https://stackoverflow.com/a/24378510/4742733

<强>更新

对我有用的一种更简单的方法就是在代码底部包含一个function,返回JSON

// within test code
let movies = getMovieSearchJSON();
.....
...
...
....
// way down below in the code
function getMovieSearchJSON() {
      return {
         "Title": "Bri Squared",
         "Year": "2011",
         "Rated": "N/A",
         "Released": "N/A",
         "Runtime": "N/A",
         "Genre": "Comedy",
         "Director": "Joy Gohring",
         "Writer": "Briana Lane",
         "Actors": "Brianne Davis, Briana Lane, Jorge Garcia, Gabriel Tigerman",
         "Plot": "N/A",
         "Language": "English",
         "Country": "USA",
         "Awards": "N/A",
         "Poster": "http://ia.media-imdb.com/images/M/MV5BMjEzNDUxMDI4OV5BMl5BanBnXkFtZTcwMjE2MzczNQ@@._V1_SX300.jpg",
         "Metascore": "N/A",
         "imdbRating": "8.2",
         "imdbVotes": "5",
         "imdbID": "tt1937109",
         "Type": "movie",
         "Response": "True"
   }
}