2

Estoy realizando un tutorial de AngularJS (el tutorial tiene más de un año pero aún así funciona). Me encuentro en una lección en la que se hace uso del método get para obtener los datos de un archivo JSON. Por supuesto, para manejar los errores utilizo (o utilizan en el tutorial) las funciones .success y .error. Cuando voy a ejecutar el ejemplo, me manda un mensaje a la consola diciendo que .success y .error no son nombres de funciones y leyendo por ahí me entero de que fueron descontinuadas (la versión de AngularJS (Angular 1) que descargué es más nueva que la que se usa en el tutorial) y que debo usar .then y .catch.

El problema viene que, al usar .then y hacer la llamada con la directiva ng-repeat, sólo muestra 5 items (de 100 que deberían ser) y además vacíos.

Otro detalle es que mando a escribir en consola los datos y sí los muestra todos en consola. Por curiosidad conseguí la versión de AngularJS que se usa en el tutorial para usar .success y .error. Mi sorpresa es que con .success sí me muestra todos los datos del JSON.

¿Podría alguien decirme si el método .then tiene alguna limitación respecto a la cantidad de datos que procesa o con la directiva ng-repeat?

Aquí están los códigos con la versión 1.6 (.then y .catch) y con la 1.3 (.success y .error)

AngularJS 1.6

HTML:

<!DOCTYPE html>
<html lang="en" ng-app="MyFirstApp">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>HTTP</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="js/controller.js"></script>
 </head>

 <body ng-controller="FirstController">
  <input type="text" name="" id="" ng-model="newPost.title">
  <br>
  <textarea name="" id="" cols="30" rows="10" ng-model="newPost.body"></textarea>
  <br>
  <button ng-click="addPost()">Enviar</button>
  <ul>
   <li ng-repeat="pos in posts">
    <h2>{{pos.title}}</h2>
    <p>{{pos.body}}</p>
   </li>
  </ul>
 </body>
</html>

JS:

angular.module("MyFirstApp", [])
.controller("FirstController", function($scope, $http)
{
 $scope.posts = [];
 $scope.newPost = {};
 $http.get('http://jsonplaceholder.typicode.com/posts')
 .then(function(data)
 {
  console.log(data);
  $scope.posts = data;
 })
 .catch(function(err)
 {

 });

 $scope.addPost = function()
 {
  $http.post('http://jsonplaceholder.typicode.com/posts',
   {title: $scope.newPost.title,
    body: $scope.newPost.body,
    userID: 1})
  .success(function(data, status, header, config)
  {
   console.log(data);
   $scope.posts.push($scope.newPost);
   $scope.newPost = {};
  })
  .error(function(err, status, header, config)
  {
   console.log(err);
  });
 }
});

AngularJS 1.3

HTML:

<!DOCTYPE html>
<html lang="en" ng-app="MyFirstApp">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>HTTP</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
  <script src="js/controller.js"></script>
 </head>

 <body ng-controller="FirstController">
  <input type="text" name="" id="" ng-model="newPost.title">
  <br>
  <textarea name="" id="" cols="30" rows="10" ng-model="newPost.body"></textarea>
  <br>
  <button ng-click="addPost()">Enviar</button>
  <ul>
   <li ng-repeat="pos in posts">
    <h2>{{pos.title}}</h2>
    <p>{{pos.body}}</p>
   </li>
  </ul>
 </body>
</html>

JS:

angular.module("MyFirstApp", [])
.controller("FirstController", function($scope, $http)
{
 $scope.posts = [];
 $scope.newPost = {};
 $http.get('http://jsonplaceholder.typicode.com/posts')
 .success(function(data)
 {
  console.log(data);
  $scope.posts = data;
 })
 .error(function(err)
 {

 });

 $scope.addPost = function()
 {
  $http.post('http://jsonplaceholder.typicode.com/posts',
   {title: $scope.newPost.title,
    body: $scope.newPost.body,
    userID: 1})
  .success(function(data, status, header, config)
  {
   console.log(data);
   $scope.posts.push($scope.newPost);
   $scope.newPost = {};
  })
  .error(function(err, status, header, config)
  {
   console.log(err);
  });
 }
});
3
  • No hay un límite en la cantidad de datos (eso en todo caso depende del servidor)... Por favor agrega tu código a la pregunta de modo que podamos identificar el error. Encontrarás el enlace a editar debajo de tu pregunta
    – Mariano
    el 31 dic. 2016 a las 6:05
  • Siempre deberias usar then en lugar de success, ambos son equivalentes excepto que el último es obsoleto y no se recomienda usarlo en tu código. Agrega el código a la pregunta pues como está actualmente no es posible ayudarte.
    – devconcept
    el 3 ene. 2017 a las 13:59
  • Gracias por las respuestas. Coloqué los bloques de código hechos con cada versión de Angular en la consulta
    – wlajo
    el 4 ene. 2017 a las 3:56

1 respuesta 1

3

No hay ninguna limitación en el método .then(). Lo único que veo en tu código de la versión 1.6 es que aunque has cambiado las llamadas en el primar $http.get(...)no lo has hecho dentro de la función $scope.addPost = function() { ... }. Sigues usando .success()y .error().

Por otra parte, a no ser que estes usando algún interceptor en $http, la función callback que se pasa al método .then() recibe un objeto response. Los datos que envía el servidor están dentro del objeto en el atributo .data.

$http.get('http://jsonplaceholder.typicode.com/posts')
    .then(function(response) {
        $scope.posts = response.data;
    }

Quizá por eso salen solo 5 elementos vacíos.

Tu Respuesta

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

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