AngularJS Not Getting Latest Data From Database

Question

I have a factory.all() function that gets called on page load. However, whenever I enter a new entry into my MongoDB or delete one, it is not refreshing. I am logging (data) to console to see how many objects are returned. Currently, I have four being returned. Even when I delete one of them, and refresh the page, 4 objects are still logged to the console. Is this a Browser caching issue? Is there a way to counter this?

My controller:

angular.module('quizCtrl', [])

.controller('quizController', function(Quiz) {
    // Assign local variable to be used in application
    var vm = this;      
    // To Load All Quizzes on Application
    Quiz.all().success(function(data) {
        console.log(data);
    });

My Factory: angular.module('quizService', [])

.factory('Quiz', function($http) {

// create a new object
var quizFactory = {};

// get a single quiz
quizFactory.get = function(id) {
    return $http.get('/api/quiz/' + id);
};

// get all quizzes
quizFactory.all = function() {
    return $http.get('/api/quiz/');
};

// create a quiz
quizFactory.create = function(quizData) {
    return $http.post('/api/quiz/', quizData);
};

// update a quiz
quizFactory.update = function(id, quizData) {
    return $http.put('/api/quiz/' + id, quizData);
};

// delete a quiz
quizFactory.delete = function(id) {
    return $http.delete('/api/quiz/' + id);
};

// return our entire quizFactory object
return quizFactory;

});

Endpoint: // GET request to load ALL quiz at once apiRouter.route('/quiz')

        .get(function(req, res) {

            Quiz.find({}, function(err, quiz) {
                if (err) res.json({ message: "Error: " + err})
                res.json(quiz);
            });
        });

    // GET request to get a specific quiz only
    apiRouter.route('/quiz/:quiz_id')

        // get the user with that id
        .get(function(req, res) {
            Quiz.findById(req.params.quiz_id, function(err, quiz) {
                if (err) res.json("Error: " + err);

                // return that user
                res.json(quiz);
            });
        });

HTML Displaying Data

<div class="panel panel-success" ng-show="quiz.quiz">
    <div class="panel-heading">
        <div class="panel-title">{{ quiz.quiz.question }} 
            <div style="float:right">
                {{ ex.createdAt | date : "MMM d, y h:mm a" }}
            </div>
        </div>
    </div>
        <div class="panel-body">
            <button type="button" class="btn btn-default" ng-click="quiz.submitAnswer(quiz.quiz.answers[0], quiz.quiz._id, quiz.quiz.correctAnswer)" ng-disabled="quiz.isDisabled">A. {{ quiz.quiz.answers[0] }}</button><br><br>
            <button type="button" class="btn btn-default" ng-click="quiz.submitAnswer(quiz.quiz.answers[1], quiz.quiz._id, quiz.quiz.correctAnswer)"" ng-disabled="quiz.isDisabled">B. {{ quiz.quiz.answers[1] }}</button><br><br>
            <button type="button" class="btn btn-default" ng-click="quiz.submitAnswer(quiz.quiz.answers[2], quiz.quiz._id, quiz.quiz.correctAnswer)" ng-disabled="quiz.isDisabled">C. {{ quiz.quiz.answers[2] }}</button><br><br>
            <button type="button" class="btn btn-default" ng-click="quiz.submitAnswer(quiz.quiz.answers[3], quiz.quiz._id, quiz.quiz.correctAnswer)"" ng-disabled="quiz.isDisabled">D. {{ quiz.quiz.answers[3] }}</button><br><br>
            <div class="alert alert-info" role="alert" ng-if="(quiz.successMessage)">
                <strong>{{ quiz.successMessage }}</strong> is correct.
            </div>
            <div class="alert alert-danger" role="alert" ng-if="(quiz.failureMessage)">
                <strong>{{ quiz.failureMessage }}</strong> is incorrect.
            </div>
            <div class="alert alert-success" role="alert" ng-if="(quiz.correctMessage)">
                Correct answer is: <strong>{{ quiz.correctMessage }}</strong>
            </div>
                Correct So Far: {{ quiz.correctSoFar }}
            </div>


            <div class="panel-body">
                <div class="panel-body">Posted by: {{ exam.postedBy }}</div>
                <div style="float:right">
                <button class="btn btn-success" type="button" ng-click="quiz.nextQuestion()" ng-if="quiz.isDisabled">Next</button>
                </div>  
            </div>      
        </div>

</div>

FYI, the `success` (and `error`) properties of the `$http` promise have been [deprecated](https://docs.angularjs.org/api/ng/service/$http#deprecation-notice) — Phil, Aug 08 '16 at 00:39
What browser are you using? Have a read of this post ~ http://stackoverflow.com/questions/16098430/angular-ie-caching-issue-for-http — Phil, Aug 08 '16 at 00:41
Try to use $scope property, inject this in controller and use it to pass data from controller to view. — MukulSharma, Aug 08 '16 at 00:49
@MukulSharma, there's no necessity of the use of `$scope`... he's using `controller-as-syntax`. — developer033, Aug 08 '16 at 00:50
@Anson HTML and the data itself. I am logging to the console all the collections in my MongoDB, and it's return 4, even though I deleted one. — David Anthony Acosta, Aug 08 '16 at 01:06
@ developer033 , but where controller-as-syntax is written.. — MukulSharma, Aug 08 '16 at 01:07
@MukulSharma, I think you should read something like this https://toddmotto.com/digging-into-angulars-controller-as-syntax/ — developer033, Aug 08 '16 at 01:58
@DavidAnthonyAcosta Which method did you delete data, $http.delete or the operation of database directly? — Anson, Aug 08 '16 at 03:00
@DavidAnthonyAcosta [$http responses are not cached by default](https://docs.angularjs.org/api/ng/service/$http). So, check it out in your endpoint and database as the following steps. **1)** check the updated data in database if you actually do update. If it isn't updated, figure it out why it isn't; if yes, go to next step. **2)** check the updated data using mongoDB client without *angular.route*. If it isn't updated, figure it out why it isn't; if yes, go to next step. **3)** try another framework for endpoint like Express.js to double check. — Anson, Aug 09 '16 at 00:33
@DavidAnthonyAcosta Could you answer this question over here with the solution you did step by step? — Anson, Aug 11 '16 at 00:25

AngularJS Not Getting Latest Data From Database

0 Answers0