Получить данные API не определены

Question

Я пытался получить и отобразить данные, однако они не отображались, и когда я смотрю на консоль, появляется сообщение «TypeError:« data.collections не определено »», и я пытаюсь понять, почему. Было бы здорово получить некоторую помощь, чтобы текст отображался.

Это мой код:

Мой файл 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('final.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.archives.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.collections.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);
                    }
                }

В консоли две строки кода, отображаемые в ошибке:

 appendData(data);

и

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

Там также написано:

 "TypeError: Unable to get property 'length' of undefined or null reference"

Answer 1

Ваш JSON, data, является массивом, поэтому средства доступа data.archives и data.collections на самом деле не существуют. Это означает, что вы пытаетесь позвонить undefined.length, откуда исходит ваша ошибка. Вам нужно, чтобы ваши аксессоры были data[0].archives и data[0].collections.