如何将 JSON 中的数据解析为我的实际元素？答案

【问题标题】：How to parse data from a JSON to my actual element?如何将 JSON 中的数据解析为我的实际元素？
【发布时间】：2021-03-22 18:10:14
【问题描述】：

我有这个 XHR 请求，它将数据从文件夹内的 JSON 文件传递到实际的 <p> 元素，但我无法弄清楚如何传递特定数据，如“标题”或“日期”。

JSON 示例：

{
    "title": "Personal development webinar",
    "date": "21.04.2021",
    "time": "8:00 AM",
    "webinar": {
      "title": "Personal development webinar",
      "link": "https://meet.google.com"
    }
}

我的 XHR 请求看起来像这样

function showEvents() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       document.getElementById("demo").innerHTML = JSON.parse(xhttp.responseText);
       console.log(this.responseText)
    }
};
xhttp.open("GET", "./events.json", true);
xhttp.send();
}

【问题讨论】：

请向我们展示一个您想要的输出示例，这就是您希望它在带有id="demo" 的元素中出现的方式。
是的，我想在我的
Title:
中显示具体数据，例如“Title: Personal development webinar。试图为该解析创建一个 var 并像 var.title 一样使用它，但它不起作用
你能显示JSON.parse(xhttp.responseText); 打印到控制台的内容吗？这将有助于准确确定正在发生的事情。
我得到了全部 4 个对象的 json 正文
imgur.com/a/7Pex66e 这是结果

标签： javascript json xmlhttprequest

【解决方案1】：

JSON.parse 函数返回一个产生 JSON 的对象。在您的情况下，一个对象数组，因为您返回了所有条目。因此，您可以通过将数组的单个索引作为对象来访问单个字段。例如：

function showEvents() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           let jsonData = JSON.parse(xhttp.responseText);
           document.getElementById("demo").innerHTML = jsonData[0].webinar.title;
           console.log(this.responseText);
        }
    };
    xhttp.open("GET", "./events.json", true);
    xhttp.send();
}

这将获得第一个数据集。

【讨论】：

啊，我从您的控制台屏幕截图中看到，您返回了一个数组。在这种情况下，我需要更新我的代码。
是的，在你评论我没有元素的索引之前，我刚刚想通了，谢谢

【解决方案2】：

您的代码只是从事件文件中获取数据。但是您从未调用过函数 showEvent() 这就是为什么它不在控制台中显示数据的原因。请参阅下面的代码以提示如何执行此操作。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .data-table
    {
        width: 100%;
        border: 2px double black;
        font-size: 18px;
    }
</style>
<body onload="showEvents()">
    <div id="demo">

    </div>


    <script>
        function showEvents() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    let dataJson = JSON.parse(xhttp.responseText);
                    displayResponseData(dataJson);
                }
            };
            xhttp.open("GET", "./data.json", true);
            xhttp.send();
        }
        function displayResponseData(data) {
            let table = ` 
            <table class="data-table">
                <thead>
                    <tr>
                        <td>Title</td>
                        <td>Date</td>
                        <td>Time</td>
                        <td>Webinar Title</td>
                        <td>Webinar LInk</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>${data.title}</td>
                        <td>${data.date}</td>
                        <td>${data.time}</td>
                        <td>${data.webinar.title}</td>
                        <td>${data.webinar.link}</td>
                    </tr>
                </tbody>
            </table>
`;
            document.getElementById("demo").innerHTML=table;
        }
    </script>
</body>

</html>

这是输出：

【讨论】：

我确实在我的控制台中获得了所有 events.json 数据，但我无法在我的
中获得其中的特定部分
我可以看看你的完整代码吗？或者你可以从我发给你的代码中得到提示，它在表格中显示数据。
把代码给我，我可以调试给你解释一下

【解决方案3】：

从您在 cmets 中提供的图像来看，您返回的数据似乎是一个对象数组。您可以将值打印到 <p> 元素，如下所示：

// the below var data resembles -> var data = JSON.parse(xhttp.responseText);
var data = [
  {
      "title": "Personal development webinar",
      "date": "21.04.2021",
      "time": "8:00 AM",
      "webinar": {
        "title": "Personal development webinar",
        "link": "https://meet.google.com"
      }
  },
  {
      "title": "Test title",
      "date": "21.04.2099",
      "time": "11:00 AM",
      "webinar": {
        "title": "Just another webinar",
        "link": "https://meet.google.com"
      }
  }
];

let output = "";

for(obj of data) {
  output += obj.title + " - " + obj.date + " " + obj.time + "<br>";
  output += obj.webinar.title + ":  " + obj.webinar.link;
  output += "<br><br>";     // two new lines
}

document.getElementById('demo').innerHTML = output;

&lt;p id="demo"&gt;&lt;/p&gt;

【讨论】：