gpt4 book ai didi

javascript - AngularJS:如何将 JSON 数据加载到范围变量中

转载 作者:可可西里 更新时间:2023-11-01 02:06:43 25 4
gpt4 key购买 nike

我正在创建一个个人网站,我可以在其中不断更新内容而无需操作 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"},
]

我实际上尝试按照给定的解决方案 here ,但它不会加载存储在同一文件夹中的 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

}
};
});

将上述服务注入(inject)Controller

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

});
});

如果您有任何问题,请告诉我。祝你好运

关于javascript - AngularJS:如何将 JSON 数据加载到范围变量中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23984929/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com