gpt4 book ai didi

json - 通过Angular JS获取外部json文件

转载 作者:行者123 更新时间:2023-12-01 22:36:48 26 4
gpt4 key购买 nike

我尝试使用 Angular JS 获取 json 数据。我已经成功获取静态 json 数据。但现在我尝试通过外部 JSON 文件获取。下面是我的代码和输出:

index.html

<!doctype html>
<html ng-app="MyInfo">
<head>

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="js/controllers.js" type="text/javascript" ></script>

</head>
<body>

<div ng-controller="MyInfoFunction">
<ul>
<li ng-repeat="item in myinfoVariable">
<div>
<h3> {{item.name }}</h3>
<p> {{item.city}}</p>
<p> {{item.state}}</p>
</div>
</a>
</li>
</div>

</body>
</html>

data.json - js/data.json

[
{
"name" : "myname1",
"city": "mycity1",
"state" : "mystate2"
},
{
"name" : "myname2",
"city": "mycity2",
"state" : "mystate2"
},
{
"name" : "myname3",
"city": "mycity3",
"state" : "mystate3"
}
]

controllers.js:js/controllers.js

 var nameSpace = angular.module("MyInfo", []);

nameSpace.controller("MyInfoFunction", function MyInfoFunction($scope, testService) {

function Init() {
$scope.data = {};
testService.getData().then(function(data) {
console.log(data)
});
}
Init();
});


nameSpace.service('testService', function ($http) {
this.getData = function () {
return $http.get('js/data.json');
}
});

输出:

  • {{item.name }}

    {{item.city}}

    {{item.state}}

我尝试获取但无法获取数据。我做错了什么请帮忙。

最佳答案

你的 Controller 困惑且不正确,额外的} & )

nameSpace.controller("MyInfoFunction", function MyInfoFunction($scope, testService)  {

function Init() {
$scope.data = {};
testService.getData().then(function(data) {
$scope.myinfoVariable = data.data;
// console.log(data)
});
}
Init();
});

你的.json应该是这样的

[
{"name":"a","city":"b","state":"c"},
{"name":"x","city":"y","state":"z"}
]

如果您的 data.json 文件位于 js 文件夹内,那么获取的 json 应该类似于

 this.getData = function () {
return $http.get('js/data.json');
}

关于json - 通过Angular JS获取外部json文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27398680/

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