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);
});
}
});
then
en lugar desuccess
, 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.