Разбор и отображение данных JSON

Question

Я хочу отобразить данные из моего файла JSON.Данные, которые я хотел бы отобразить, - это заголовок из моего файла JSON, однако я не уверен, как его проанализировать.Я думаю, что часть, которую я ошибаюсь, это «data [i] .archives.year1.title» и т. Д., Но я не уверен, как решить эту проблему.

Это то, что я уже пробовал:

Мой JSON-файл

        [
        {
          "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-файл

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

Я ожидаю, что на выходе отобразятся все заголовки из "архивов"и все названия из "сборников".Я новичок в JavaScript.

Answer 1

Ваш цикл для здесь:

for (var i = 0; i < data.length; i++) //archives
for (var i = 0; i < data.length; i++) //collections

должно быть:

for (var i = 0; i < data.archives.length; i++) //archives
for (var i = 0; i < data.collections.length; i++) //collections

тогда вы можете ссылаться на значения с помощью:

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>';

Также бонусные баллы за просмотр VueJS или ReactJS, а также за обучение использованию console.log в инструментах отладки вашего браузера.

Edit:

После прочтения вашего комментария и повторного чтения вашего файла JSON я понимаю, что он вложен в массив. Вы можете удалить квадратные скобки, содержащие объект, который вы собираетесь использовать, или использовать:

for (var i = 0; i < data[0].collections.length; i++)
'<span class="archives">' + data[0].archives[i].year1.title + '</span>'

Квадратные скобки создают массив, содержащий объект, к которому вы пытаетесь получить доступ, куда вы можете добавить больше объектов, но, поскольку вы уже используете объект объектов, массив, содержащий его, кажется избыточным.