Как отобразить таблицу из json URL по AngularJS? - PullRequest
Новая
       0

Как отобразить таблицу из json URL по AngularJS?

0 голосов
/ 03 декабря 2018

Я новичок в 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>

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Вам нужно определить функцию 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;
      });
  }

Надеюсь, это решит вашу проблему.

0 голосов
/ 03 декабря 2018

кажется, что ваш код в порядке.

Проверьте ответ URL-адреса, распечатав ответ в консоли браузера. Я думаю, вы получаете сообщение об ошибке CORS для URL (http://www.bogotobogo.com/AngularJS/files/Tables/planet.json).

Просто пройдите приведенный ниже код для создания таблицы с использованием локальных данных вместо 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...