时间戳

首页 > 解决方案 > 将 JSON 从 URL 格式化为 HTML

javascript - 将 JSON 从 URL 格式化为 HTML

问题描述

如何获取从 URL 输出的 JSON 并将其格式化为 html。我拥有的 JSON 如下所示：

prtg-version    "xxxxxxx"
treesize    0
channels    
0   
name    "Downtime"
name_raw    "Downtime"
lastvalue   ""
lastvalue_raw   ""
1   
name    "Execution Time"
name_raw    "Execution Time"
lastvalue   "19 msec"
lastvalue_raw   19
2   
name    "File count"
name_raw    "File count"
lastvalue   "431 #"
lastvalue_raw   431
3   
name    "Folder Size"
name_raw    "Folder Size"
lastvalue   "224,855,871 Byte"
lastvalue_raw   224855871
4   
name    "Newest File"
name_raw    "Newest File"
lastvalue   "1 s"
lastvalue_raw   1
5   
name    "Oldest File"
name_raw    "Oldest File"
lastvalue   "1 h 31 m"
lastvalue_raw   5476

它每 15 秒更新一次。我想格式化成一个 html 表格并删除一些批量。我尝试了 w3schools 的一些代码，但这只是返回：[object Object],[object Object]

我的代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("https://myurl/api/table.json?blahblahblah", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

标签： javascriptjqueryhtmljson

解决方案

field是对您正在循环的对象的引用。将其输出到 DOM 会将其强制转换为字符串，因此您会看到[object Object]输出。

要解决此问题，您需要访问对象属性并构建要输出的 HTML。还要注意从对象的上下文和你的代码看起来你应该循环result.channels，而不是result。尝试这个：

var result = [{
  'prtg-version': "xxxxxxx",
  treesize: 0,
  channels: [{
    name: "Downtime",
    name_raw: "Downtime",
    lastvalue: "",
    lastvalue_raw: ""
  }, {
    name: "Execution Time",
    name_raw: "Execution Time",
    lastvalue: "19 msec",
    lastvalue_raw: 19
  }, {
    name: "File count",
    name_raw: "File count",
    lastvalue: "431 #",
    lastvalue_raw: 431
  }
  // more data...
  ]
}]

jQuery(function($) {
  $("button").click(function() {
    // AJAX code removed from this demo, as it obviously cannot work
    // $.getJSON("https://myurl/api/table.json?blahblahblah", function(result){        
      $.each(result[0].channels, function(i, field) {
        $("div").append(`<p>${field.name}</p>`);
      });     
    // })
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button>Get JSON data</button>
<div></div>

推荐阅读