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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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