Получать json rest api и показывать это в AngularJS (Угловой 1)

у меня есть этот rest api, который возвращает мне имена базы данных. Тема состоит в том, что я попробовал несколько способов это показывать в AngularJS и не смог сделать это.

Url ответа .json

http://samp.newclan.com.uy:3000/api/names

AngularJS

var app = angular.module('adminPanel', []);

app.controller('namesController', function($scope) {
    $http.get("http://samp.newclan.com.uy:3000/api/names")
    .then(function (response) {$scope.names = response.data;});
});

Ответ Json

[{"nombre":"Example_example"},{"nombre":"Sebastian_Treend"},{"nombre":"Jose_Martinez"},{"nombre":"Demo_Demo"}]

Каковым был бы лучший способ возвращать правильно эти имена в scope?

1
задан 28.08.2019, 15:22
0 ответов

Я перемещаю тебя пример с твоими данными, протестируй это:

<script>
var app = angular.module('adminPanel', []);
app.controller('namesController', function($scope,$http) {
    $http.get("http://samp.newclan.com.uy:3000/api/names")
    .then(function (response) {$scope.names = response.data;});
});
</script>
<!DOCTYPE html>
<html lang="en" ng-app="adminPanel">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>

<body>

    <div class="col-md-6" ng-controller="namesController">
        <table class="table">
            <thead>
                <tr ng-repeat="data in names">
                   <td>{{data.nombre}}</td>
                </tr>
            </thead>
        </table>
    </div>

</body>

</html>

Если, открыв страницу, он не показывает данных, нажми F12, если у тебя есть этот ошибка:

XMLHttpRequest cannot load http://samp.newclan.com.uy:3000/api/names. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Тогда он состоит из-за проблем CORS, в том, что уже она была бы темой помимо браузера, который ты был бы должен исследовать или консультироваться снова.

Привет

PD: Я оставляю задержание функционирования

introducir la descripción de la imagen aquí

PD 2: jejeje

анализируя твой код давно:

 <table class="table">
      <thead>
        <tr ng-repeat="data in names">
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>{{data.name}}</td>
          <td>{{data.country}}</td>
          <td>@mdo</td>
        </tr>
      </tbody>
    </table>

Твоя ошибка, - в котором ng-repeat = "датирует in ямс" будь внутри первого tr, который соответствует head, но в body эти данные не присутствуют, он должен бы быть alrevez.

 <table class="table">
          <thead>
            <tr >
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="data in names">
              <th scope="row">1</th>
              <td>{{data.name}}</td>
              <td>{{data.country}}</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>

Я надеюсь, что он подает ответ. Bye.

1
ответ дан 03.12.2019, 17:53
  • 1
    В ответе на твой PD2 это старик jaja уже я понял и это упорядочил, но спасибо :p и если он окончательно дает мне эту ошибку XMLHttpRequest cannot, похвалите :( –  03.01.2017, 20:15

здесь у тебя есть пример функционируя, что делает то, в чем ты нуждаешься:

                                                            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ej de AngularJS</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="col-md-6" ng-app="adminPanel" ng-controller="namesController">
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Nombre</th>
        </tr>
      </thead>
      <tbody ng-repeat="data in names">
        <tr>
          <th scope="row">1</th>
          <td>{{data.name}}</td>
        </tr>
      </tbody>
    </table>
  </div>

  </body>
</html>

<script type="text/javascript">var app = angular.module('adminPanel', []);

app.controller('namesController', function($scope, $http) {

var root = 'https://jsonplaceholder.typicode.com';

$http.get(root + "/users")
    .then(function (response) {
    $scope.names = response.data;
    });
});</script>
1
ответ дан 03.12.2019, 17:53