0

Estoy intentando mostrar unos datos realizando una petición con angularJS pero no me devuelve nada la pantalla principal. En este caso debería mostrar el título.

index.html:

 <div ng-controller="postController">
        <ul ng-repeat="post in posts">
            <li>{{post.userID}}</li>
            <li>{{post.title}}</li>
        </ul>
    </div>

postController.html:

myApp.controller("postController", ["$scope", "$http", function($scope, $http) {
    $http.get("https://jsonplaceholder.typicode.com/posts").then(function (response) {
        $scope.post=response.data;
    }
)}]);

1 respuesta 1

2

En el código del index.html, la propiedad del controlador que va a recibir los datos, y a partir de la cual se van a generar las repeticiones con la directiva ng-repeat se llama posts:

<ul ng-repeat="post in posts">
    <!-- Contenido -->
</ul>

Pero en el codigo JS de tu controlador, esa propiedad que recibe los datos se llama post.

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

¿Solución? Simple: Cambia el nombre de la propiedad de tu controlador de $scope.post a $scope.posts.

myApp.controller("postController", ["$scope", "$http", function($scope, $http) {
    $http.get("https://jsonplaceholder.typicode.com/posts").then(function (response) {
        $scope.posts = response.data;
    }
)}]);

Adicional a ello: La API que estás consumiendo devuelve registros con propiedad userId, no userID. Si quieres que se muestre esa información, en el primer elemento <li> anidado en el elemento <ul>, tienes que cambiar el {{post.userID}} por {{post.userId}}.

Lo puedes ver en acción en el siguiente snippet.

/* Modelo */
let myApp = angular.module('myApp', []);

myApp.controller("postController", ["$scope", "$http", function($scope, $http) {
    $http.get("https://jsonplaceholder.typicode.com/posts").then(function (response) {
        $scope.posts=response.data;
    }
)}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="postController">
        <ul ng-repeat="post in posts">
            <li>{{post.userId}}</li>
            <li>{{post.title}}</li>
        </ul>
    </div>
</div>

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.