时间戳

首页 > 解决方案 > 解析和显示 JSON 数据

json - 解析和显示 JSON 数据

问题描述

我正在寻找显示我的 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 新手。

标签： jsonfetch-api

解决方案

你的 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>'

方括号创建一个包含您尝试访问的对象的数组，您可以在其中附加更多对象，但由于您使用的对象已经包含它的数组似乎是多余的。

推荐阅读