Load JSON file into JavaScript variable

Question

So, I need to put the following code into a JSON file and load it into a separate JavaScript file:

var allQuestions = [{
  question: "What is Elvis Presley's middle name?",
  choices: ["David", "Aaron", "Eric", "Jack"],
  correctAnswer: 1
}, {
  question: "Who is the singer of the Counting Crows?",
  choices: ["Adam Duritz", "John Adams", "Eric Johnson", "Jack Black"],
  correctAnswer: 0
}, {
  question: "Who is the Queen of Soul?",
  choices: ["Mariah Carey", "Whitney Houston", "Aretha Franklin", "Beyonce"],
  correctAnswer: 2
}, {
  question: "Which famous group was once known as The Quarrymen?",
  choices: ["The Beatles", "The Birds", "The Who", "Led Zeppelin"],
  correctAnswer: 0
}];

In other words, the contents of allQuestions need to go in a JSON file and then loaded into the allQuestions variable in a separate JavaScript file. What would the JSON file look like and how would I load it into the allQuestions variable?

guest271314 · Accepted Answer · 2015-12-26 03:57:46Z

3

Try using JSON.stringify() , $.getJSON()

What would the JSON file look like

"[
  {
    "question": "What is Elvis Presley's middle name?",
    "choices": [
      "David",
      "Aaron",
      "Eric",
      "Jack"
    ],
    "correctAnswer": 1
  },
  {
    "question": "Who is the singer of the Counting Crows?",
    "choices": [
      "Adam Duritz",
      "John Adams",
      "Eric Johnson",
      "Jack Black"
    ],
    "correctAnswer": 0
  },
  {
    "question": "Who is the Queen of Soul?",
    "choices": [
      "Mariah Carey",
      "Whitney Houston",
      "Aretha Franklin",
      "Beyonce"
    ],
    "correctAnswer": 2
  },
  {
    "question": "Which famous group was once known as The Quarrymen?",
    "choices": [
      "The Beatles",
      "The Birds",
      "The Who",
      "Led Zeppelin"
    ],
    "correctAnswer": 0
  }
]"

how would I load it into the allQuestions variable?

$.getJSON("/path/to/json", function(data) {
  var allQuestions = data;
})

jsfiddle https://jsfiddle.net/dydhgh65/1

answered Dec 26, 2015 at 3:57

guest271314

1

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

2 Comments

Julian Over a year ago

It's still not loading for some reason. Maybe I'm doing something wrong. Am I supposed to include the quotation marks in the JSON file? Also, do I need to include the $.post function in your fiddle?

guest271314 Over a year ago

@Julian "supposed to include the quotation marks in the JSON file" Try removing first and last double quotation marks, check at jsonlint.com; see alsohttp://stackoverflow.com/questions/5293555/how-do-you-represent-a-json-array-of-strings , json.org . "Also, do I need to include the $.post function in your fiddle? " $.post() was used for jsfiddle to echo response, see doc.jsfiddle.net/use/echo.html

Mystical · Accepted Answer · 2018-12-25 16:53:38Z

1

You can use the ES6 fetch API, like so:

// return JSON data from any file path (asynchronous)
function getJSON(path) {
    return fetch(path).then(response => response.json());
}

// load JSON data; then proceed
getJSON('/path/to/json').then(data => {
    // assign allQuestions with data
    allQuestions = data;  
}

Here is how to do it using async and await.

async function getJSON(path, callback) {
    return callback(await fetch(path).then(r => r.json()));
}

getJSON('/path/to/json', data => allQuestions = data);

edited Dec 25, 2018 at 16:53

answered Dec 25, 2018 at 16:46

Mystical

2,8622 gold badges26 silver badges47 bronze badges

Comments

I_Al-thamary · Accepted Answer · 2018-12-25 17:45:59Z

0

Try this:

var myList;
$.getJSON('JsonData.json')
.done(function (data) {
myList = data;
});

answered Dec 25, 2018 at 17:45

I_Al-thamary

4,1883 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

Load JSON file into JavaScript variable

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related