如何改进 JSON 数据的显示

How to improve display of JSON data

本文关键字：显示 数据 JSON 何改进      更新时间：2023-09-26

我是JSON和JS的新手，并且已经生成了一个JSON文件以通过.onclick事件显示数据。到目前为止，我已经生成了 JSON 数据并将其显示在屏幕上，但现在我想以表格格式设置它的样式，以便能够更清楚地看到元素。任何帮助都会很棒！

这是我的JS：

    addEventListener("load", set_up_click_handler);
function set_up_click_handler() {
  var url = 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json';
  var button = document.getElementById("button");
  button.addEventListener("click", click_handler);
  function click_handler(event) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.addEventListener("load", response_handler);
    request.send();
  };
  function response_handler() {
    if (this.status == 200) {
      var json = this.responseText;
      var data = JSON.parse(json);
      window.localStorage.setItem('exhibitions', JSON.stringify(data));
            var div = document.createElement("div");
            div.setAttribute("id", "dateOfExhibition");
      var list = $('<ul/>');
      for (var item in data) {
        list.append(
          $("<li />").text(item + ": " + data[item])
        );
      }
      $('#exhibitions').append(list);
    } else {
      alert('An error has occurred.');
    }
  }
    }

如果今天有人感到特别慈善，我也会遇到以下问题：每次我点击我的按钮时，列表都会再次显示出来。如何重新设计代码，使其仅显示一次？

在不真正了解所需表格样式的情况下，请参阅将数据格式化为显示标题的表格的示例，具有空数组的地址也没有在此函数中处理

var jsonData = 	{ "id": "Pavlov's Dog", "dateOfExhibition": "2018-07-08T22:00:00.000Z", "address": [], "street": "Bergmannstrasse 29", "city": "Berlin", "country": "Deutschland", "zip": "10473"};
function createTable(jsonData){ 
  //create headers
  var head = $("<tr />");    
  var keys = Object.keys(jsonData);
  keys.forEach(function(key){
    head.append($("<th>"+ key + "</th>"));
  });  
  $("#exhibitionTable").append(head);
  
  //append data (if you have multiple objects in an array like this wrap this in a forEach)
  var row = $("<tr />");    
  for (var item in jsonData){    
    row.append($("<td>"+ jsonData[item] + "</td>"));    
  }
  $("#exhibitionTable").append(row);
}
$(document).ready(function(){
  createTable(jsonData);
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <table id="exhibitionTable">
    </table>
</body>
</html>

相关文章：