Div*_*raj 12 javascript json angularjs
我正在创建一个个人网站,我可以继续更新内容,而无需操纵HTML.我试图通过简单地加载和更新JSON文件来实现这一点.但是现在,我无法将JSON数据加载到scope变量上.
HTML
<!doctype html>
<html>
<head>
<script src="angular.min.js" type="text/javascript"></script>
<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="mainController">
<div id="content">
<div ng-repeat="content in contents">
<h2>{{content.heading}}</h2>
<p>{{content.description}}</h2>
</div>
</div>
</div>
</body>
</html>
maincontroller.js
var myapp = angular.module('mainApp', []);
myapp.controller('mainController',function($scope,$http){
$scope.contents = null;
$http.get('mainContent.json')
.success(function(data) {
$scope.contents=data;
})
.error(function(data,status,error,config){
$scope.contents = [{heading:"Error",description:"Could not load json data"}];
});
//$scope.contents = [{heading:"Content heading", description:"The actual content"}];
//Just a placeholder. All web content will be in this format
});
这就是JSON文件的样子
[
{"heading":"MyHeading","description":"myDescription"},
]
我实际上尝试按照这里给出的解决方案,但它没有加载JSON存储在同一文件夹中的文件.我得到的输出来自错误处理函数,Error: Cannot load JSON data如上所述.
我究竟做错了什么？
编辑:我在plunker上放了相同的代码,它工作正常.它只是不在我的本地机器上工作.
修改了您的方法使用此方法和检查输出.
var myapp=angular.module('mainApp',[]);
myapp.controller('mainController',function($scope,$http){
$scope.content = null;
$http.get('urlpath'}).
success(function(data, status, headers, config) {
$scope.contents=data;
}).error(function(data, status, headers, config) {
});
});
或者我看到的另一个好习惯
使用工厂服务方法: -
angular.module('mainApp').factory('Myservice', function($http){
return {
getdata: function(){
return $http.get('url'); // You Have to give Correct Url either Local path or api etc
}
};
});
将以上服务注入Controller
控制器: -
angular.module('mainApp',[]).controller('mainController',function($scope,Myservice){
$scope.content = null;
Myservice.getdata().success(function (data){
alert('Success');
$scope.content=data[0]; // as per emilySmitley Answer which is Working Good
});
});
如果您有任何疑问,请告诉我.祝好运
你的json文件有一个数组,数组中第一个也是唯一一个元素是json对象.当.success()触发并将数据传递给lambda函数时,data是一个数组,而不仅仅是json.您所要做的就是访问数组的第0个元素.
所以这:
.success(function(data) {
$scope.contents = data;
})
应该是这样的:
.success(function(data) {
$scope.contents = data[0];
})
此外,你应该检查data[0]以确保它是json,如果它没有验证,你应该调用parseJSON(data[0])它.