Angular json data showing in console, but not in the view

Question

I am newbie at Angular and I don't really know how to solve this problem. I have looked online and read the documentation, but I haven't found a proper answer. I also asked coworkers about this issue. They couldn't figure it out to assist me, so I thought it would be best to ask you guys about what the best way to solve this is.

Basically, the app is supposed to change the json data when the user clicks link in the menu. It is supposed to grab the current index and then display the corresponding data based on that index in the array. I will post the code that I have so far.

Here is a link to the code on Plunker.

app.factory('quest', ['$http', function($http) { 
return $http({
method: 'GET',
url: 'data/study.json'
}).success(function(data) { 
return data; 
}) 
.error(function(err) { 
return err; 
});
}]);

There are many errors in your plunker, please fix that... You could try this instead of $routeProvider, I am assuming that you are using radiobuttons to select. When a radio button is clicked, call a function that makes a url request according to the choice selected — akashrajkn
– akashrajkn, Commented Jul 15, 2015 at 5:57
The only thing i can tell you is sometimes an Object in the console is showing the updated data as soon as u open the object in the console, but at the moment where you need the data in the code its sometimes not there try using $timeout function around and wait for the return data, later when you are a little more familiar with angular you can use promises for that — stackg91
– stackg91, Commented Jul 15, 2015 at 6:02

Community · Accepted Answer · 2017-05-23 10:26:45Z

In order to use HTTP requests I would suggest to use the following pattern:

app.factory('quest', function($http, $q) {
   var promise;
   return {
      getQuests: function() {
          // $http returns a promise, so we don't need to create one with $q
          promise = $http.get('data/study.json')
          .then(function(data) {
            return data;
          }, function(err) {
            return $q.reject(err);
          });
         return promise;
      }
   }
});

So later you can fetch the factory in your Controller with:

quest.getQuests()
.then(function(data) {
    $scope.data = data;
}, function(res) {
    if(res.status === 500) {
        // server error, alert user somehow
    } else { 
        // probably deal with these errors differently
    }
});

You can find the pattern here: https://stackoverflow.com/a/18383845/1918775

There is also a good example of saving data under a factory so you need only one HTTP request to get data from web-service.

LadyT · Accepted Answer · 2015-07-15 22:37:46Z

0

Thanks everyone for your answers. I ended up figuring it out. What I did was created a function to search the array and I passed in the current term. The function returned a data associated with that item.

answered Jul 15, 2015 at 22:37

LadyT

6592 gold badges12 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular json data showing in console, but not in the view

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related