I'm making a request to questions.json, but I'm unsure how to capture the data returned by the response call. The JSON file is just an object but when I try to call response.names to get it, it's telling me response is not defined? Didn't I define it when I called the json function on it?
I'm thinking maybe because it's a promise, it's not technically defined? Unsure.
Here's my code:
fetchQuestions();
function createCategory(category, questions) {
const categoryDiv = document.createElement('div');
div.classList.add('category');
const h2 = document.createElement('h2');
h2.textContent = category;
categoryDiv.append(h2);
questions.forEach(question => {
const questionDiv = document.createElement('div');
questionDiv.classList.add('question');
const statusDiv = document.createElement('div');
statusDiv.classList.add(questions.status);
questionDiv.append(statusDiv);
const h3 = document.createElement('h3');
h3.textContent = question.name;
questionDiv.append(h3);
categoryDiv.append(questionDiv);
});
return categoryDiv;
}
function fetchQuestions() {
const myRequest = new Request('questions.json');
fetch(myRequest)
.then(response => response.json())
.then(getQuestionsByCategory(response.names))
.catch(console.error);
}
function getQuestionsByCategory(questions) {
const questionsByCategory = {};
questions.forEach(question => {
if (questionsByCategory.hasOwnProperty(question.category)) {
questionsByCategory[question.category].push(question);
} else {
questionsByCategory[question.category] = [question];
}
});
return questionsByCategory;
}