JavaScript error Object expected at function

Question

I am trying to build an app with VS2015,JavaScript, Angular, MVC 5.

This is my JavaScript code :

var myApp = angular.module('QuizApp', []);

myApp.controller('QuizController', ['$scope', function ($scope, $http) {
    $scope.answered = false;
    $scope.title = "loading question...";
    $scope.options = [];
    $scope.correctAnswer = false;
    $scope.working = false;

    $scope.answer = function () {
        return $scope.correctAnswer ? 'correct' : 'incorrect';
    };

    $scope.nextQuestion = function () {
        $scope.working = true;
        $scope.answered = false;
        $scope.title = "loading question...";
        $scope.options = [];

        $http({
            method: 'GET', url: "/api/trivia"
        }).then(function (response) {

            var data = response.data;
            var status = response.status;
            var headers = response.headers;
            var config = response.config;

            $scope.options = data.options;
            $scope.title = data.title;
            $scope.answered = false;
            $scope.working = false;
        }, function (response) {

            var data = response.data;
            var status = response.status;
            var headers = response.headers;
            var config = response.config;

            $scope.title = "Oops... something went wrong";
            $scope.working = false;

        });

    };

    $scope.sendAnswer = function (option) {
        $scope.working = true;
        $scope.answered = true;

        $http({
            method: 'POST',
            url: "/api/trivia",
            data: { 'questionId': option.questionId, 'optionId': option.id }
        }).then(function (response) {

            var data = response.data;
            var status = response.status;
            var headers = response.headers;
            var config = response.config;

            $scope.correctAnswer = (data === true);
            $scope.working = false;
        }, function (response) {

            var data = response.data;
            var status = response.status;
            var headers = response.headers;
            var config = response.config;

            $scope.title = "Oops... something went wrong";
            $scope.working = false;
        });


    }
}]);

When I try to run it, I get this error :

TypeError: Object expected at $scope.nextQuestion (http://localhost:63758/Scripts/app/quiz-controller.js:21:9) at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js:176:498) angular.js (10061,11)

Here is where I use the function nextQuestion() :

 <div class="flip-container text-center col-md-12" ng-controller="QuizController" ng-init="nextQuestion()">
......
</div>

Jamiec · Accepted Answer · 2017-09-20 10:07:57Z

3

You're injecting $scope AND $http - you should have placeholders for both:

myApp.controller('QuizController', ['$scope', '$http', function ($scope, $http) {
 ...
});

answered Sep 20, 2017 at 10:07

Jamiec

136k15 gold badges141 silver badges202 bronze badges

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

Collectives™ on Stack Overflow

JavaScript error Object expected at function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related