Question

我尝试使用Angular JS获取json数据。我已成功获取静态json数据。但现在我尝试通过外部JSON文件获取。以下是我的代码＆amp;有输出：

的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}}

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

Answer 1

你的控制器凌乱而且不正确，额外}＆amp; )

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

Answer 2

您应该尝试获取js/data.json而不是data.json。

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

您需要提供相对于index.html的网址。

如果您在http://myapp.com上托管您的申请，并且您需要获得的json文件托管在http://myapp.com/js/data.json上，那么您可以$http.get("js/data.json") $http.get("http://myapp.com/js/data.json") http://mysecondapp.com。但是，如果您的json文件托管在其他网站上，请说$http.get("http://mysecondapp.com/data.json")，那么您需要执行{{1}}

通过Angular JS获取外部json文件

2 个答案: