I am facing the same issue as the individual in this discussion: $http.get doesn't load JSON
Unable to find a solution either way. I am running the website using MAMP, so I don't think that's the problem?
Below is the code:
index.html
<!DOCTYPE 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">
<script type="text/javascript" ng-src="js/angular.min.js"></script>
<script type="text/javascript" ng-src="js/quiz.js"></script>
</head>
<body>
<div id="myQuiz" ng-controller="QuizController">
<h1>Test Your Knowledge: <span> Saturn</span></h1>
<div class="progress">
{{totalQuestions}}
</div>
</div>
</body>
</html>
quiz.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;
});
}]);
})();
quiz_data.json
[
{
"question" : "Saturn is the _______ planet from the Sun.",
"answers" : [
{ "id" : 0, "text" : "Fourth" },
{ "id" : 1, "text" : "Sixth" },
{ "id" : 2, "text" : "Second" },
{ "id" : 3, "text" : "Eighth" }
],
"correct" : 1
},
{
"question" : "Which image shows a close-up of Saturn?",
"answers" : [
{"id" : 0, "image" : "images/close_up_01.jpg" },
{"id" : 1, "image" : "images/close_up_02.jpg" },
{"id" : 2, "image" : "images/close_up_03.jpg" },
{"id" : 3, "image" : "images/close_up_04.jpg" }
],
"correct" : 3
},
{
"question" : "One year on Saturn is equivalent to how many years on Earth?",
"answers" : [
{"id" : 0, "text" : "12"},
{"id" : 1, "text" : "6"},
{"id" : 2, "text" : "29"},
{"id" : 3, "text" : "2"}
],
"correct" : 2
},
{
"question" : "What is the name of Saturn's largest moon?",
"answers" : [
{"id" : 0, "text" : "Hercules"},
{"id" : 1, "text" : "Europa"},
{"id" : 2, "text" : "Goliath"},
{"id" : 3, "text" : "Zeus"},
{"id" : 4, "text" : "Titan"},
{"id" : 5, "text" : "Triton"}
],
"correct" : 4,
"feedback" : "Though the names seem similar, Triton orbits the planet Neptune."
},
{
"question" : "Saturn is visible from Earth without a telescope",
"answers" : [
{"id" : 0, "text" : "True"},
{"id" : 1, "text" : "False"}
],
"correct" : 0
}
]
website It seems like there is an issue with the connection to json. Unsure of how to resolve this.
Thank you in advance!