Load multiple JSON objects from multiple files

Question

I am trying to create a quiz website. The quiz data (questions, answers, and correct answer) are stored in JSON files. Everything works as is, but I would like to include a unique image in each individual JSON file. I figured that the best way would be to create another object; meaning I'd have the structure shown below:

[
   {"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":[]
   }
]

This is the JavaScript which used to work before I added the new image object above all the questions:

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;
    }
  });
]);

Now, not even the questions will show up. I appreciate any sort of help, or even alternative solutions. All I need to do is add an image which would remain there for every question. What HTML code would I need to show the image?

Thanks in advance!

The $http.get looks sketchy. Do the URLs really have spaces like the data in jsonData? — georgeawg
– georgeawg, Commented Jul 13, 2018 at 19:36
What effort have you done to debug this? Did you check the network tab in the Developer Console to see what data is being returned from the server? — georgeawg
– georgeawg, Commented Jul 13, 2018 at 19:39
I'm voting to close this question as off-topic because there is no evidence of effort to debug the problem. — georgeawg
– georgeawg, Commented Jul 13, 2018 at 19:52
Why would you close it if it isn't actually off-topic? I'm still new to programming. :) And yep, I did do that. It turns out that my error lies in the fact that I cannot have two root elements in JSON - so that aspect is solved. My new problem is one which I am trying to solve at the moment, but I will return to this lovely community should I not be able to. :) — David Micallef
– David Micallef, Commented Jul 15, 2018 at 5:32

Jonathan Hamel · Accepted Answer · 2018-07-13 17:33:47Z

1

A valid JSON object only has one root element. You can use JSON linters to see if your JSON is valid http://jsonlint.com. I'd suggest to use something like this as a structure.

{
  "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": []
    }
  ]
}

answered Jul 13, 2018 at 17:33

Jonathan Hamel

1,38313 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Wilhelmina Lohan Over a year ago

Remember to add .questions before iterating the results in code.

David Micallef Over a year ago

I've made the amendments to the JSON file to make it structured as shown above.. what should I look for next?

Jonathan Hamel Over a year ago

Just add another property to your question object $scope.allQuestions[i].adImage = quizData[i].data.adImage or use it from $scope.allQuestions[i].data.adImage. You can then use it in your view depending on how you loop in your template`<img ng-src="{{adImage}}" />

Collectives™ on Stack Overflow

Load multiple JSON objects from multiple files

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related