Parsing and displaying JSON data - json

Question

I am looking to display the data from my JSON file. The data I would like to display is the title from my JSON file however I am unsure of how to parse it. I think the part I am getting wrong is the 'data[i].archives.year1.title' etc but I am unsure of how to solve this.
This is what I have already tried:
My JSON file
[
{
"archives": {
"year1": {
"title": "Sample Title 1"
},
"year2": {
"title": "Sample Title 2"
},
"year3": {
"title": "Sample Title 3"
}
},
"collections": {
"health": {
"title": "Sample Title 4"
},
"money": {
"title": "Sample Title 5"
},
"relationships": {
"title": "Sample Title 6"
}
}
}
]
HTML
<div class="archives"></div>
<div class="collections"></div>
JavaScript file
fetch('example.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(error => console.log('Looks like there was a problem: ', error));
function appendData(data) {
var mainContainer = document.getElementById("archives");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML =
'<span class="archives">' + data[i].archives.year1.title + '</span>' +
'<span class="archives">' + data[i].archives.year2.title + '</span>' +
'<span class="archives">' + data[i].archives.year3.title + '</span>';
mainContainer.appendChild(div);
}
}
function appendData(data) {
var mainContainer = document.getElementById("collections");
for (var i = 0; i < data.length; i++) {
var div = document.createElement("div");
div.innerHTML =
'<span class="collections">' + data[i].collections.health.title + '</span>' +
'<span class="collections">' + data[i].collections.money.title + '</span>' +
'<span class="collections">' + data[i].collections.relationships.title + '</span>';
mainContainer.appendChild(div);
}
}
I expect the output to display all of the titles from "archives" and all of the titles from "collections". I am new to JavaScript.

Answer 1

Your for loops here:
for (var i = 0; i < data.length; i++) //archives
for (var i = 0; i < data.length; i++) //collections
should be:
for (var i = 0; i < data.archives.length; i++) //archives
for (var i = 0; i < data.collections.length; i++) //collections
then you can reference values with:
div.innerHTML =
'<span class="archives">' + data.archives[i].year1.title + '</span>' +
'<span class="archives">' + data.archives[i].year2.title + '</span>' +
'<span class="archives">' + data.archives[i].year3.title + '</span>';
Also bonus points for looking into VueJS or ReactJS and also learning to use console.log in your browser's debug tools.
Edit:
After reading your comment and re-reading your JSON file I realize you have it nested inside an array. You can either delete the square brackets containing your object you intend to use, or use:
for (var i = 0; i < data[0].collections.length; i++)
'<span class="archives">' + data[0].archives[i].year1.title + '</span>'
The square brackets create an array containing the object you are trying to access, where you could append more objects, but since you're using an object of objects already the array containing it seems redundant.