获取未定义的 API 数据答案

【问题标题】：Fetch API data undefined获取未定义的 API 数据
【发布时间】：2019-06-24 17:26:24
【问题描述】：

我一直在尝试获取和显示数据，但它没有显示，当我在控制台上查看时，它显示“TypeError：“data.collections is undefined””，我正在努力理解为什么。获得一些帮助以显示文本会很棒。

这是我的代码：

我的 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"

【问题讨论】：

这可能是也可能不是问题，但您没有检查 HTTP 操作是否成功。不幸的是，fetch 实现了它的承诺，如果网络操作有效，即使 HTTP 操作没有。在我贫血的小博客上查看my post，您需要在调用response.json()之前检查response.ok。
有一个名为appendData 的函数在一个名为appendData 的函数中，正如您在上面看到的那样。更令人困惑的是，您似乎从未调用过嵌套的，而外部的也没有任何结束 }。

标签： json fetch-api

【解决方案1】：

您的 JSON data 是一个数组，因此访问器 data.archives 和 data.collections 实际上并不存在。这意味着您正在尝试调用undefined.length，这是您的错误的来源。你需要让你的访问者是data[0].archives和data[0].collections。

【讨论】：