Importing JSON to HTML with Angular.JS (error)!
Question
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;
});
});
})();
3 answers
solution1
1 2018-01-30 00:14:44
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!
solution2
0 2018-01-29 23:03:32
Add closing square bracket }]);
You opend array here ['$scope
solution3
0 2018-01-30 09:34:02
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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.