Javascript 将JSON从URL格式化为HTML_Javascript_Jquery_Html_Json

Javascript 将JSON从URL格式化为HTML

javascript jquery html json

Javascript 将JSON从URL格式化为HTML,javascript,jquery,html,json,Javascript,Jquery,Html,Json,如何获取从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 ms

如何获取从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表，并删除一些批量。我尝试了W3S的一些代码，但这只是返回：

[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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.getJSON（“https://myurl/api/table.json?blahblahblah，函数（结果）{
$.each（结果、函数（i、字段）{
$（“div”）.append（字段+”）；
});
});
});
});
获取JSON数据

字段

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

[object object]

输出

要解决这个问题，您需要访问对象属性并构建要输出的HTML。另请注意，从对象和代码的上下文来看，您应该在

result.channels

上循环，而不是

result

。试试这个：

var结果=[{
'prtg版本'：“xxxxxxx”，
树大小：0，
频道：[{
名称：“停机时间”，
name_raw：“停机时间”，
最后值：“”，
lastvalue_原始值：“
}, {
名称：“执行时间”，
name_raw：“执行时间”，
lastvalue:“19毫秒”，
原始值：19
}, {
名称：“文件计数”，
name_raw：“文件计数”，
lastvalue:“431#”，
lastvalue_原始值：431
}
//更多数据。。。
]
}]
jQuery（函数（$）{
$（“按钮”）。单击（函数（）{
//AJAX代码从这个演示中删除，因为它显然无法工作
//$.getJSON（“https://myurl/api/table.json?blahblahblah“，函数（结果）{
$.each（结果[0]。通道，函数（i，字段）{
$（“div”）.append（`p>${field.name}`）；
});     
// })
});
});

获取JSON数据
对象上的toString（）
通常会导致[object object]
。您应该先将字段JSON.stringify
字符串化。非常感谢您的帮助。我不确定我是否理解正确。我看到您已经删除了“getJSON”并在代码中指定了它——这不意味着现在数据不再是动态的了吗。我正在尝试ta。这只是为了这个例子，因为我显然无法重新创建AJAX请求。关键是，$。each（）
需要按照指示进行修改，但仍在AJAX回调中。我将修改答案，使其更具说服力。当getJSON被重新注释时，我无法使其工作。