Can't assign JSON response data to $scope variable in AngularJS

Question

I'm trying to assign JSON response data from BookService.GetBookDetail(item) to my $scope.detailData so i can put it in my detail.html template. My problem is with {{detailData}} in detail.html which for some reason does not show the detailData i want. Can somebody tell me why my {{detailData}} isn't show anything? Here's my code in app.js :

App.factory("BookService", function($http, $log){
    //var getData = []; 
    return{
            GetBookDetail: function(item){
                return $http.get("http://it-ebooks-api.info/v1/book/"+item);
            }
        }
})

function AppController($scope, $http, $log, BookService){
  $scope.query = '';
  $scope.brand = true;
  $scope.dataDump = "Hello World";

  $scope.loadBooks = function(){
        $scope.loading = true;
        $scope.brand = false;
        $http.get("http://it-ebooks-api.info/v1/search/"+$scope.query)
            .then(function(response){
                $scope.dataBook = response.data.Books;
                $scope.dataSearch = response.data;
                $scope.loading = false;
                $log.info(response.data);
                $scope.query = "";
            });
  }

  $scope.detailBook = function(item){
      console.log(item);
      BookService.GetBookDetail(item).then(function(result){
         $scope.detailData = result.data;
      });
  }

}

App.controller("AppController", ["$scope", "$http", "$log", "BookService", AppController]);

I'm using ionic framework. Here's my detail.html template. The whole {{detailData.props}} are showing nothing with the exception for {{dataDump}} which is showing the dataDump value "Hello World".

<ion-content ng-controller="AppController" class="padding background has-header">
    <ion-list>
        <ion-item class="item-thumbnail-left item-text-wrap">
            <img ng-src="{{ detailData.Image }}" alt="">
            <h2>{{ detailData.Title }}</h2>
            <h2>{{ detailData.Author }}</h2>
            <h3>{{ detailData.SubTitle }} </h3>
            <h4>{{ detailData.Description }}</h4>
            <h4>{{ dataDump }}</h4>
        </ion-item>
    </ion-list>
</ion-content>

Here's how i manage my 2 templates :

App.config(function($stateProvider, $urlRouterProvider){
       $stateProvider
            .state('home',{
                url: '/home',
                templateUrl: 'templates/home.html'
            })
        .state('detail', {
                url: '/detail',
                templateUrl: 'templates/detail.html'
            })

        $urlRouterProvider.otherwise('/home');

    });

I'm desperate to know why my binding expression in detail.html is not working. Any suggestions would be very helpful. Thanks.

please provide your service or factory code. or rather provide a codepen. — Karan Kumar
– Karan Kumar, Commented Sep 22, 2015 at 12:28

Karan Kumar · Accepted Answer · 2015-09-22 12:40:31Z

3

Inject the $rootScope in the controller:

Change $scope.detailData to $rootScope.detailData.

$rootScope.detailData = result.data

OR

Remove the ng-controller from the ion-content. (you should not define controllers in HTML)

Have a habit of defining the controller in the ui-router itself.

As you stated that you have defined the controller in the home.html as well as the detail.html, So both the controller is making different scopes as result of which you are not getting the values.

I hope this will work for you!!

edited Sep 22, 2015 at 12:40

Karan Kumar

2,66521 silver badges36 bronze badges

answered Sep 22, 2015 at 10:46

VizardCrawler

1,30310 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

ryanpeter Over a year ago

I already call the method from ng-click in my home.html template. Here's my home.html template :

<ion-item ng-repeat="item in dataBook" class="item-thumbnail-left item-text-wrap" href="#/detail" ng-click="detailBook(item.ID)"> 						<img ng-src="{{ item.Image }}" alt=""> 						<h2>{{ item.Title }}</h2> 						<h3>{{ item.SubTitle }} </h3> 						<p>{{ item.Description }}</p> 					</ion-item>

VizardCrawler Over a year ago

So in the home.html page is it Holding the same ng-controller="AppController" , check which controller you have placed

ryanpeter Over a year ago

the console.log(result.data) returns a json that look like this :

{ "Error": "0", "Time": 0.00146, "ID": 1306953553, "Title": "Head First HTML with CSS & XHTML", "SubTitle": "A Learner's Companion to HTML, CSS, and XHTML", "Description": "Tired of reading HTML books that only make sense after you're an expert? ...etc", "Author": "Elisabeth Robson, Eric Freeman", "ISBN": "9780596101978", "Year": "2005", "Page": "704", "Publisher": "O'Reilly Media", "Image": "s.it-ebooks-api.info/3/head_first_html_with_css__xhtml.jpg";, "Download": "filepi.com/i/bsMyy1H"; }

ryanpeter Over a year ago

in home.html i'm using the same controller. I put in <ion-pane ng-controller="AppController"></ion-pane> which wrapped the whole content of my home.html

VizardCrawler Over a year ago

I have updated my answer please check , Please inject the $rootScope in the contoller

|

duncanhall · Accepted Answer · 2015-09-22 10:18:18Z

1

The $http.get method returns a promise. In your GetBookDetail method, you need to return this promise, and access the data once it's resolved (as you have when using the $http.get method in your AppController).

To do this, try the following:

    GetBookDetail: function(item){
        return $http.get("http://it-ebooks-api.info/v1/book/"+item);
    }


BookService.GetBookDetail(item)
.then(function(result){
    $scope.detailData = result.data;
});

edited Sep 22, 2015 at 10:18

answered Sep 22, 2015 at 9:46

duncanhall

11.5k6 gold badges61 silver badges95 bronze badges

4 Comments

ryanpeter Over a year ago

I've modified my code as your suggestion but still the {{detailData.props}} isn't showing in my detail.html. So i'm still facing the same problem here. What really puzzles me is that when i'm $log.info($scope.detailData), it gives me back the correct object response. But somehow, it just won't show using the {{detailData.props}} binding expression in detail.html.

duncanhall Over a year ago

I updated my example - make sure you are setting $scope.detailData inside the resolve of the promise. Also, what does $scope.detailData log look like?

ryanpeter Over a year ago

the log returns an object that look like this :

ryanpeter Over a year ago

{ "Error": "0", "Time": 0.00146, "ID": 1306953553, "Title": "Head First HTML with CSS & XHTML", "SubTitle": "A Learner's Companion to HTML, CSS, and XHTML", "Description": "Tired of reading HTML books that only make sense after you're an expert? ...etc", "Author": "Elisabeth Robson, Eric Freeman", "ISBN": "9780596101978", "Year": "2005", "Page": "704", "Publisher": "O'Reilly Media", "Image": "s.it-ebooks-api.info/3/head_first_html_with_css__xhtml.jpg", "Download": "filepi.com/i/bsMyy1H" }

Andreas · Accepted Answer · 2015-09-22 09:46:21Z

0

BookService.GetBookDetail(item); returns a promise. Do something like:

BookService.GetBookDetail(item).then(function(result){
    $scope.detailData = result.data;
});

And then have your service simply return:

GetBookDetail: function(item){
     return $http.get("http://it-ebooks-api.info/v1/book/"+item);
}

answered Sep 22, 2015 at 9:46

Andreas

1,0811 gold badge13 silver badges26 bronze badges

2 Comments

ryanpeter Over a year ago

I've modified my code as your suggestion but still the {{detailData.props}} isn't showing in my detail.html. So i'm still facing the same problem here. What really puzzles me is that when i'm $log.info($scope.detailData), it gives me back the correct object response. But somehow, it just won't show using the {{detailData.props}} binding expression in detail.html.

VizardCrawler Over a year ago

Please do console.log(result.data) and tell exactly what you are getting

Collectives™ on Stack Overflow

Can't assign JSON response data to $scope variable in AngularJS

3 Answers 3

12 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related