Javascript 如何通过AngularJS从json URL显示表？_Javascript_Html_Angularjs

Javascript 如何通过AngularJS从json URL显示表？

javascript html angularjs

Javascript 如何通过AngularJS从json URL显示表？,javascript,html,angularjs,Javascript,Html,Angularjs,我是Angular JS的新手，正在学习如何从URL创建表。我在网上找到了这段代码，展示了如何将URL中的信息显示到表中，但它不起作用，你们能帮我检查一下吗。多谢各位 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> </head>

我是Angular JS的新手，正在学习如何从URL创建表。我在网上找到了这段代码，展示了如何将URL中的信息显示到表中，但它不起作用，你们能帮我检查一下吗。多谢各位

<!DOCTYPE html>
<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>

<body>
  <div ng-app="" ng-controller="planetController"> 
    <table>
      <tr>
        <th>Planet</th>
        <th>Distance</th>
      </tr>
      <tr ng-repeat="x in names">
        <td>{{ x.name}}</td>
        <td>{{ x.distance}}</td>
      </tr>
    </table>
  </div>

  <script>
  function planetController($scope, $http) {
    $http.get("http://www.bogotobogo.com/AngularJS/files/Tables/planet.json")
    .success(function(response) {$scope.names = response;});
  }
  </script>

</body>
</html>


行星
距离
{{x.name}
{{x.distance}}
功能平面控制器（$scope，$http）{
$http.get（“http://www.bogotobogo.com/AngularJS/files/Tables/planet.json")
.success（函数（响应）{$scope.names=response；}）；
}

您的代码似乎很好

通过在浏览器控制台中打印响应来检查URL响应我认为，URL（）出现CORS错误。

只需阅读下面使用本地数据而不是API/URL创建表的代码

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.name }}</td>
    <td>{{ x.distance }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {
    $scope.names= [
  {"name":"Neptune", "distance":30.087},
  {"name":"Uranus", "distance":19.208},
  {"name":"Saturn", "distance":9.523}, 
  {"name":"Jupiter", "distance":5.203}, 
  {"name":"Mars", "distance":1.524}, 
  {"name":"Earth", "distance":1.0}, 
  {"name":"Venus", "distance":0.723}, 
  {"name":"Mercury", "distance":0.387}    
]
});
</script>

</body>
</html>


{{x.name}
{{x.distance}}
var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope，$http）{
$scope.names=[
{“名称”：“海王星”，“距离”：30.087}，
{“名称”：“天王星”，“距离”：19.208}，
{“名称”：“土星”，“距离”：9.523}，
{“名字”：“木星”，“距离”：5.203}，
{“名称”：“火星”，“距离”：1.524}，
{“名称”：“地球”，“距离”：1.0}，
{“名称”：“维纳斯”，“距离”：0.723}，
{“名称”：“水星”，“距离”：0.387}
]
});

您需要定义init（）函数并定义api调用

<div ng-app="myApp" ng-controller="customersCtrl"  ng-init="init()"> 
  <table>
   <tr ng-repeat="x in names">
     <td>{{ x.name }}</td>
     <td>{{ x.distance }}</td>
   </tr>
   </table>
   </div>

  function init(){
     $http.get("http://www.bogotobogo.com/AngularJS/files/Tables/planet.json")
     .success(function(response) {
        $scope.names = response;
      });
  }


{{x.name}
{{x.distance}}
函数init（）{
$http.get（“http://www.bogotobogo.com/AngularJS/files/Tables/planet.json")
.成功（功能（响应）{
$scope.names=响应；
});
}

希望这能解决你的问题