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

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 代码来显示图像？

提前致谢！

标签： javascriptarraysangularjsjsonobject

Answer 1

一个有效的 JSON 对象只有一个根元素。您可以使用 JSON linter 查看您的 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": []
    }
  ]
}