1

Intentando realizar una petición asíncrona para mostrar un listado en pantalla con AngularJS, me encuentro con el problema de que los datos no son mostrados. ¿A qué puede deberse? En consola no aparece ningún error. Así se ve el listado: introducir la descripción de la imagen aquí

index.html:

<!DOCTYPE html>
<html ng-app="Practicando AngularJS">
<head>
    <meta charset="utf-8" />
    <title>AngularJS - http</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
    <script src="controller.js"></script>
</head>
<body ng-controller="FirstController">
    <ul>
        <li ng-repeat="post in posts">
            <h2>{{post.title}}</h2>
            <p>
                {{post.body}}
            </p>
        </li>
    </ul>
</body>
</html>

controller.js:

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

            //});
    });

introducir la descripción de la imagen aquí

2
  • La llamada Get si te esta trayendo la información? Si es así, como se mira la estructura de la respuesta?
    – Isaac
    Commented el 7 abr. 2020 a las 11:46
  • Object data: Array(100) 0: {userId: 1, id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"} 1: {userId: 1, id: 2, title: "qui est esse", body: "est rerum tempore vitae↵sequi sint nihil reprehend…aperiam non debitis possimus qui neque nisi nulla"} 2: {userId: 1, id: 3, title: "ea molestias quasi exercitationem repellat qui ipsa sit aut", body: "et iusto sed quo iure↵voluptatem occaecati omnis e…↵molestiae porro eius odio et labore et"}
    – user09b
    Commented el 7 abr. 2020 a las 11:59

1 respuesta 1

1

Por lo que puedo ver, accedías al objeto response (tu data) directamente, y eso no es válido, ya que el objeto response, no contiene únicamente los datos, si no más cosas. Consulta aquí su definición oficial

Es decir, he cambiado el nombre data por response para darle más claridad, y así, verás que realmente hay que acceder a response.data

Puedes comprobarlo con este script:

angular.module("Practicando AngularJS", []).controller("FirstController", function ($scope, $http) 
{
        $http.get("https://jsonplaceholder.typicode.com/posts")
            .then(function(response) {
                //response es un objeto que tiene más cosas que los datos, como el estado de la respuesta, etc.
                console.log("EN LA CONSOLA PUEDES VER TODO EL OBJETO RESPONSE");
                console.log(response);

                //tienes que acceder a Response.data
                $scope.posts = response.data;
            })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="Practicando AngularJS" ng-controller="FirstController">
    <ul>
        <li ng-repeat="post in posts">
            <h2>{{post.title}}</h2>
            <p>
                {{post.body}}
            </p>
        </li>
    </ul>
</body>

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.