0

I'm having issues transferring my JSON data to HTML with Angular.JS, I'm doing a programming course and this is an issue I came across that the author doesn't seem to have, can anyone help?

I linked angular correctly, I added the app correctly, it should work, any ideas?

https://pastebin.com/K4HR23Tk - HTML

<html ng-app="myQuiz">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test Your Knowledge: Saturn</title>
    <link rel="stylesheet" type="text/css" href="css/quiz.css">
</head>
<body>
<div id="myQuiz" ng-controller="QuizController">
<h1>Test Your Knowledge: <span>Saturn</span></h1>
<div class="progress"> {{totalQuestions}} </div>

https://pastebin.com/5emA4016 - JS

(function(){
    var app = angular.module('myQuiz',[]); 
    app.controller('QuizController',['$scope', '$http', '$sce', function($scope,$http,$sce){ 
        $scope.score = 0;
        $scope.activeQuestion = -1;
        $scope.activeQuestionAnswered = 0;
        $scope.percentage = 0;
        $http.get('quiz_data.json').then(function(quizData){
            $scope.myQuestions = quizData.data;
            $scope.totalQuestions = $scope.myQuestions.length;
        });
    });
})();
Improve this question
2
  • Use jsfiddle or codepen to share your code. They can link angular JS by choosing it as an option. Commented Jan 29, 2018 at 23:24
  • Ok, I will try to put my code in that right now so I can get some help, thanks. Commented Jan 29, 2018 at 23:32

3 Answers 3

Reset to default
1

Your code is missing a closing square bracket ]. This is the completed code:

(function(){
    var app = angular.module('myQuiz',[]); 
    app.controller('QuizController',['$scope', '$http', '$sce', function($scope,$http,$sce){ 
        $scope.score = 0;
        $scope.activeQuestion = -1;
        $scope.activeQuestionAnswered = 0;
        $scope.percentage = 0;
        $http.get('quiz_data.json').then(function(quizData){
            $scope.myQuestions = quizData.data;
            $scope.totalQuestions = $scope.myQuestions.length;
        }).catch(function(response){
            console.error(response && response.message || response);
            console.log("Using 2 dummy questions");
            $scope.myQuestions = ["dummy", "questions"];
            $scope.totalQuestions = $scope.myQuestions.length;
        });
    // below inserted the missing `]`.
    }]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<body ng-controller="QuizController">
  <div>Total questions: {{totalQuestions}}</div>
  <div ng-repeat="question in myQuestions">{{question}}</div>

Your opening [ after 'QuizController' never got closed by a matching ].

This mistake could be avoided if you use a decent editor or linter that can help highlight or automatically close each block for you.

An extra advice to you from someone who's been there (I assume you were a beginner since you mentioned "paste" in your comment and you did claim you were taking a programming course) -- If you're struggling over this simple typo, it means that you're going too fast and do not stop to digest. Take it slow and read everything thoroughly and try to understand it. Do not fall into copy and pasting code trap. It could take you much more time to learn and write good code.

Happy coding!

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

4 Comments

Thank you! This seems to work as it removed the {{totalQuestions}} but is not showing "5" as total questions yet. I'll play around with it, thanks for the advice. Yes I am new to Angular JS but I've been doing HTML and Swift for a while now! Really appreciate the help :D I think I know what to do now <3
Try initialing $scope.totalQuestions = 0 before the $http.get block. If your HTML shows 0 then it's probably because it's not bound correctly to update the value once the promise is resolved.
You can show your love by voting both answers and mark either as the correct one.
Oh non, does this mean @user9286154 is incapable of love? :o(
0

Add closing square bracket }]);

You opend array here ['$scope

Improve this answer

7 Comments

I will try this! where should I paste this exactly? Thanks for the help :D <3
Second line from the bottom
The missing ] should be used to closed the app.controller block. Try using an IDE with autocomplete or block highlighting. It should help you with closing brackets.
This did not help my issue, it still says {{totalQuestions}} and not importing my data. Thanks though :D
@PieOhPah I will try to add the ] and see what happens. thanks.
|
0

This isn't a direct answer but contains tips on how to avoid errors which the OP encountered.

Always start with the absolute minimum code, then build it up, always making sure the code keeps working as you add complexity. Whenever it breaks, it was obviously something you just added/changed.

In the following code examples I removed the need for the IIFE and added "use strict" to activate Strict Mode which I always recommend. Click on the Run code snippet buttons to see the code in action:

angular.module('myQuiz',[]);
angular.module('myQuiz').controller('QuizController', function(){
  "use strict";
  console.log("QuizController");
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<div ng-controller="QuizController">

Injecting dependencies with array syntax (I think it's a good idea to format the dependencies on a separate line):

angular.module('myQuiz',[]);
angular.module('myQuiz').controller('QuizController', [
    '$scope', '$http',
    function($scope, $http){ 
        "use strict";
        console.log("Injected $scope successfully?:", Boolean($scope));
        console.log("Injected $http successfully?:", Boolean($http));
    }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<div ng-controller="QuizController">

Then try to access external data. This example provokes an error. I'll let you run the code to see why:

angular.module('myQuiz',[]);
angular.module('myQuiz').controller('QuizController',[
    '$scope', '$http',
    function($scope, $http){ 
        "use strict";
        $http.get('quiz_data.json').then(function(quizData){
            console.log(quizData.data);
        }).catch(function(response){
            console.error("Unable to load quiz data");
            console.error(response && response.message || response);
        });
    }
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myQuiz">
<div ng-controller="QuizController">

Improve this answer

1 Comment

@user9286154 All the above examples work without needing JSFiddle or codepen

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.