AngularJS: factory $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被硬编码到工厂中时，我已经让我的控制器、工厂和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
});任何和所有的帮助都是感激的。谢谢!
回答 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对象：
$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {所以使用函数(Response)调用成功并返回response.data是多余的。
3) success函数不会返回您传递给它的函数的结果，所以这不是您认为它所做的事情：
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;
});Stack Overflow用户
发布于 2014-07-22 09:37:04
这个答案对我帮助很大，并为我指明了正确的方向，但对我和其他人有效的是：
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);
});
});https://stackoverflow.com/questions/16930473
复制相似问题
腾讯云开发者
