Wait until all the data is loaded . AngularJS

Question

I am writing a code that would call DATA from JASON file. I had an asynchronous problem and saw many posts about same issue.

I wrote some code that I guess it would fix my problem. It, however, seems like the data is still not loaded.

I will be more specific with my question. I used promise method below. I thought 'questions' should not be returned before all the data is fully loaded. Apparently, 'questions', having nothing inside, is returned to my page.

Is my promise method correct? if not how can I fix this problem. Can someone please help me?

(function(){

angular
    .module("GrammarQuiz")
    .factory("DataService", DataFactory);
    function DataFactory($log, $q, $http, $timeout){
        var vm = this
        var questions = getData() ;
        vm.getData = getData;

        function getData(){
            var defer = $q.defer()
            $http.get('api/data1.json')
            .success(function(res){
                questions = res;
                $log.log('success');
                defer.resolve(res);
            })
            .error(function(err, status){
                $log.log('fail');
                defer.reject(err);
            })
            return defer.promise;
        }


        $log.log('check');
        $log.log(questions[0]);

        return questions;
    }  


})();

Possible duplicate of How do I return the response from an asynchronous call? — Heretic Monkey
– Heretic Monkey, Commented Aug 15, 2016 at 22:15
Yes I did see this post, but still cannot figure out the way to solve within my code. I am not sure what is the issue. :( — Taehun Ahn
– Taehun Ahn, Commented Aug 15, 2016 at 22:16
This is race condition city here. You are deliberately delaying the http request of something to try and log it later or something? Either call a function in the success function, or use a promise. — ryanlutgen
– ryanlutgen, Commented Aug 15, 2016 at 22:17
You need to explain what you don't understand about that duplicate. edit your question and explain that. — Heretic Monkey
– Heretic Monkey, Commented Aug 15, 2016 at 22:18
the reason why I have both timeout and promise is because promise method didn't work. so, I just added timeout before positing this question. this doesn't work without timeout anyway. — Taehun Ahn
– Taehun Ahn, Commented Aug 15, 2016 at 22:19

Lex · Accepted Answer · 2016-08-15 23:03:30Z

0

What you have shown is not the proper way to use Promises. Instead you should be doing something similar to the following:

Factory (Service)

.factory("DataService", DataFactory);

function DataFactory($http) {
    var service = {};
    service.getData = function () {
        return $http.get('api/data1.json')
            .then(function(response) {
                return response.data;
            });
        };
    return service;
}

Controller

.controller("MyController", MyController);

function MyController($scope, DataService) {
    $scope.questions = {}; // or $scope.questions = []; if the return type is an array
    DataService.getData()
        .then(function(data) {
            $scope.questions = data;
        })
        .catch(function(errorResponse) {
            // do something with the error
        });
}

edited Aug 15, 2016 at 23:03

answered Aug 15, 2016 at 22:18

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

Comments

Dr. Cool · Accepted Answer · 2016-08-15 22:18:47Z

-1

You've got a couple problems with asynchronous code here, as you suggested in your post.

The first problem is that you're trying to log data that doesn't exist yet with this code:

$log.log(questions[0])

This is being run immediately after the request to get data so obviously the data hasn't been loaded yet. What will it print go the console? Probably undefined or something similar.

If you want to log your questions data, you need to do that in the $http.get success function.

    $http.get('api/data1.json')
    .success(function(res){
        questions = res;
        $log.log('success');
        $log.log(questions);
        defer.resolve(res);
    })

Secondly, you're creating a promis by using $q.defer but that's completely unnecessary because $http.get already returns a promise which is executed in the .success() function. So remove any extra promises to simplify your code and just use the $http.get.

And don't expect data to be available anywhere else except in the .success() function.

answered Aug 15, 2016 at 22:18

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

1 Comment

Taehun Ahn Over a year ago

I do not want to log my questions data. I need 'questions' fully loaded with data and return it to the other controller so that I can use information in the data. Until now, questions is returned without any data. Could you tell me how to do it? or could you at least tell me a porper way of using promise?

Collectives™ on Stack Overflow

Wait until all the data is loaded . AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related