Angular View not updating after retrieving data from database

Question

I am currently working on an app that retrieves data on the of change of $routeParams. So here's how it begins:

function artistCtrl($scope, $http, $location, dataFactory, $routeParams){
$scope.artistName = $routeParams.artistname

$scope.$watch('artistName', function(newValue, oldValue){
  $scope.artistInfo = dataFactory.getArtist(newValue)
})

$scope.artistInfo = {
  artist_name: dataFactory.artistInfo.artist_name,
  artist_genre: dataFactory.artistInfo.artist_genre,
  artist_imageurl: dataFactory.artistInfo.artist_imageurl,
  artist_bio: dataFactory.artistInfo.artist_bio
};
}

The callback for $watch here is run. dataFactory.getArtist retrieves newValue from my database which is being done successfully. That is done like this:

dataFactory.js

  dataFactory.getArtist = function(artist){   
    return dataFactory.checkDb(artist).then(function(dbData){
      if(dbData.data != "No data"){
          dataFactory.artistInfo = dbData.data[0] 
      } 
      return dbData.data[0]
    })
  }

dataFactory.artistInfo = "";

dataFactory is a factory I created in another file.

artistpage.html

<div class="container this">
      <div class="row">
        <div class="col-sm-6">
          <div><h1>{{artistInfo.artist_name}}</h1></div>
          <div rate-yo id='stars' rating="myRating" class="col-sm-4"></div>
          <div id='reviews'>23 Reviews</div>
          <div><h2>{{artistInfo.artist_genre}}</h2></div>
          <div><p>{{artistInfo.artist_bio}}</p></div>
          <div><button type="button" class="btn btn-primary" ng-click="somefunc()">Submit a Review</button></div>
        </div>
        <div class="col-sm-6 reviews">
          <div><img class="artistpageimage" src={{artistInfo.artist_imageurl}}></div>
        </div>
      </div>

</div>

I don't understand why my view isn't being updated. I am attempting to update $scope.artistName by assigning the returned dataFactory.getArtist(newValue) and also by assigning the new data to dataFactory.artistInfo I have read about $apply, but I am having a hard time figuring out how to apply it in this context. Can anyone help?

camomileCase · Accepted Answer · 2015-06-13 21:35:41Z

2

Does getArtist return a promise or a value. If it's a promise try something like the below:

$scope.$watch('artistName', function(newValue, oldValue){
  dataFactory.getArtist(newValue).then(function(value) {
    $scope.artistInfo = value;
  })
})

answered Jun 13, 2015 at 21:35

camomileCase

1,7062 gold badges18 silver badges27 bronze badges

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

Comments

Alan · Accepted Answer · 2015-06-13 21:34:30Z

2

I think the problem is that dataFactory.getArtist(newValue) is returning a promise, which you're assigning directly to artistInfo. Try replacing it with:

dataFactory.getArtist(newValue).then(function (info) {
    $scope.artistInfo = info;
});

answered Jun 13, 2015 at 21:34

Alan

3,0022 gold badges17 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular View not updating after retrieving data from database

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related