0
У меня такая же проблема, как парень в этой теме: $http.get doesn't load JSONJSON не загружается с помощью AngularJS
не можете найти решение в любом случае. Я запускаю сайт с помощью MAMP, так что это не проблема, я думаю?
Вот код:
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 Похоже, что связь с json не работает. Не знаю, как это решить.
Заранее благодарен!
выглядит как будто ничего не отображается. Что говорит консоль? –
не используют 'ng-src' при загрузке ссылок на Java-скрипты. вместо этого он должен использовать атрибут 'src' только как' ', я не думаю, что это устранит любую проблему, но увидит это и прокомментирует. Есть ли ошибка в консоли? –
Это ошибка: angular.min.js: 87 XMLHttpRequest не может загрузить файл: /// C: /MAMP/htdocs/S3/portfolio_v2/quiz_data.json. Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource. – Mick