CODEWITHSUNDEEP
javascripthtmlangularjs
Caio César
Caio César

Reputation: 221

Data available in controller but not parsing in the html

I am new at AngularJS and i've been trying to make a simple application that gets data from a API and i need to show that data on the client browser.

I have managed to get the data and i can access it on the controller, by using console.log , but when i try show that data on the HTML via a angular expression, it shows nothing. The data is written on the console log but not on the HTML, below there are the codes for my HTML and my Controller:

HTML:

<body class="list-group" ng-controller="StoreController as store">
    <header>
      <h1 class="text-center">Learning Angular</h1>
      <h2 class="text-center">– This is pretty fun –</h2>
    </header>       
    <div class="sizeLimitter">
        {{store.posts[0].title}}
    </div>
</body>

Controller:

app.controller('StoreController', ['$sce', '$scope', '$http', function( $sce, $scope, $http ) {
    this.products = gems; // Using on other parts and working as intended.

    // urlPosts contains the original link, which i cannot share.
    var trustedUrl = $sce.trustAsResourceUrl(urlPosts); 

    this.posts = $http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
    .then(function(postsRecieved) {
        this.posts = postsRecieved;
        console.log(postsRecieved.data[0].title);
        console.log(posts.data[0].title);
});

}]);

Example of JSON:

    [
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }]

The title is printed twice on the console, so it works for both postsRecieved.data[0].title and posts.data[0].title. What am i doing wrong here and how do i fix it, so that the data can be shown on the html?

Upvotes: 0

Views: 62

Answers (3)

miladfm
miladfm

Reputation: 1526

this in #hhtp request is windows object and is not same as this in controller. so you have to save this before you use $http request like that: 

var vm = this;

and in success of request is:

vm.posts = postsRecieved.data;

hier can you see a example for $http request: https://codepen.io/miladfm/pen/rwNemb

Upvotes: 0

Hadi
Hadi

Reputation: 17289

It should be like to this.Because you using then function

 var self = this;
$http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
.then(function(postsRecieved) {
    self.posts = postsRecieved.data;
});

Upvotes: 0

vertex3
vertex3

Reputation: 26

There are few mistakes in a controller:

  1. this.posts in query resolve function is not not a scope's posts property because this in controller and this in resolve function are different. So, you should make scope available in resolve function by creating a scope variable in controller
  2. your view expects data array in scope.posts, not http result object. So, you should put postsRecieved.data in posts property.

Here is a full Controller code:

app.controller('StoreController', ['$sce', '$scope', '$http', function( $sce, $scope, $http ) {
    this.products = gems; // Using on other parts and working as intended.
    //make scope available in .then(function)
    var scope = this;
    //initialize an empty array of posts. this is not nesessary, but good for code understanding
    scope.posts = [];

    // urlPosts contains the original link, which i cannot share.
    var trustedUrl = $sce.trustAsResourceUrl(urlPosts); 

    this.posts = $http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
    .then(function(postsRecieved) {
        //put data into сorresponding scope's property
        scope.posts = postsRecieved.data;
        console.log(postsRecieved.data[0].title);
        console.log(scope.posts.data[0].title);
    });

}]);

Upvotes: 1

Related Questions