Question

我正在尝试创建一个测验网站。测验数据（问题，答案和正确答案）存储在JSON文件中。一切正常，但我想在每个JSON文件中包含一个唯一的图像。我认为最好的方法是创建另一个对象。表示我的结构如下所示：

[
   {"adImage" : "images/NoOvertake.jpg"}
],

[
   {
    "question" : "Before making a U - turn in the road you should always:",
    "answers":[
      {"id" : 0, "text" : "Select a higher gear than normal"},
      {"id" : 1, "text" : "Signal so that other drivers can slow down"},
      {"id" : 2, "text" : "Look over your shoulder for final confirmation"},
      {"id" : 3, "text" : "Give another signal as well as using your indicators"}
      ],
    "correct" : [2],
    "allAns":[]
   },
   {
    "question" : "As a driver what do you understand by the term 'Blind Spot'?",
    "answers"  : [
        {"id"  : 0, "text" : "An area covered by your left hand mirror" },
        {"id"  : 1, "text" : "An area not covered by your headlights" },
        {"id"  : 2, "text" : "An area covered by your right hand mirror" },
        {"id"  : 3, "text" : "An area not covered by your mirrors" }
    ],
    "correct"  : [3],
     "allAns":[]
   }
]

在我在所有问题之上添加新的图像对象之前，这是曾经使用过的JavaScript：

var app = angular.module('myQuiz',[]);
app.controller('QuizController'
['$scope','$http','$q','$sce',function($scope,$http,$q,$sce){
  var jsonData = ['alertness','attitude', 'safety and your vehicle',
                   'safety margins','hazard awareness',
                   'vulnerable road users','other type of vehicles',
                   'vehicle handling','dual carriageway rules',
                   'rules of the road','road and traffic signs',
                   'documents','accidents','vehicle loading'];
  var promise = [];
  $scope.allQuestions = [];
  for(var i=0;i<jsonData.length;i++) {
    promise.push($http.get(jsonData[i]+'.json'))
  }
  $q.all(promise).then(function(quizData){
    for(var i=0;i<quizData.length;i++) {
      $scope.allQuestions[i] = {};
      $scope.allQuestions[i].quizName = jsonData[i];
      $scope.allQuestions[i].data = quizData[i].data;
      $scope.allQuestions[i].score = 0;
      $scope.allQuestions[i].activeQuestion = -1;
      $scope.allQuestions[i].activeQuestionAnswered = 0;
      $scope.allQuestions[i].percentage = 0;
      var questionNumber = quizData.length;
    }
  });
]);

现在，甚至连问题都不会出现。我感谢任何帮助，甚至替代解决方案。我需要做的就是添加一张图像，每个问题都会保留在那里。我需要什么HTML代码才能显示图像？

谢谢！

Answer 1

有效的JSON对象只有一个根元素。您可以使用JSON linters来查看JSON是否有效http://jsonlint.com。我建议使用类似这样的结构。

{
  "adImage": "images/NoOvertake.jpg",
  "questions": [
    {
      "question": "Before making a U - turn in the road you should always:",
      "answers": [
        {
          "id": 0,
          "text": "Select a higher gear than normal"
        },
        {
          "id": 1,
          "text": "Signal so that other drivers can slow down"
        },
        {
          "id": 2,
          "text": "Look over your shoulder for final confirmation"
        },
        {
          "id": 3,
          "text": "Give another signal as well as using your indicators"
        }
      ],
      "correct": [
        2
      ],
      "allAns": []
    },
    {
      "question": "As a driver what do you understand by the term 'Blind Spot'?",
      "answers": [
        {
          "id": 0,
          "text": "An area covered by your left hand mirror"
        },
        {
          "id": 1,
          "text": "An area not covered by your headlights"
        },
        {
          "id": 2,
          "text": "An area covered by your right hand mirror"
        },
        {
          "id": 3,
          "text": "An area not covered by your mirrors"
        }
      ],
      "correct": [
        3
      ],
      "allAns": []
    }
  ]
}

从多个文件加载多个JSON对象

1 个答案: