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

Question

我有这个 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();
}

Answer 1

您的代码只是从事件文件中获取数据。但是您从未调用过 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>

这是输出：

Answer 2

JSON.parse 函数 returns 生成 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();
}

这得到了第一个数据集。

Answer 3

从您在评论中提供的图片来看，您返回的数据似乎是一个对象数组。您可以像这样将值打印到 <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;

<p id="demo"></p>

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

How to parse data from a JSON to my actual element?

javascript

json

xmlhttprequest