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循环在这里：

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时也有加分。

编辑：

在阅读注释并重新阅读JSON文件后，我意识到您已将其嵌套在数组中。您可以删除包含要使用的对象的方括号，也可以使用：

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

方括号创建了一个包含您要访问的对象的数组，您可以在其中附加更多对象，但是由于您使用的是对象对象，因此包含该对象的数组似乎是多余的。

解析和显示JSON数据

1 个答案: