1

tengo esta rest api que me devuelve nombres de una base de datos. El tema es que he intentado varias formas de mostrarlo en AngularJS y no he conseguido hacerlo.

Url de la respuesta .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;});
});

Respuesta Json

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

Cual seria la mejor forma de devolver correctamente estos nombres en el scope?

2 respuestas 2

1

Te paso un ejemplo con tus datos, pruebalo:

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

Si al abrir la página no muestra los datos, presiona F12, si tienes éste error:

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.

Entonces es por problemas de CORS, que ya sería un tema aparte del navegador que deberías investigar o consultar de nuevo.

Saludos

PD: Dejo captura del funcionamiento

introducir la descripción de la imagen aquí

PD 2: jejeje

analizando tu código de hace rato:

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

Tu error está en que ng-repeat="data in names" está dentro del primer tr que corresponde al head, pero en el body esos datos no están presente, debería ser 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>

Espero sirva la respuesta. Bye..

1
  • En respuesta a tu PD2 eso es viejo jaja ya me di cuenta y lo arregle, pero gracias :p y si definitivamente me da este error XMLHttpRequest cannot load :( Commented el 3 ene. 2017 a las 18:15
1

aquí tienes un ejemplo funcionando que hace lo que necesitas:

                                                            <!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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.