来自 URL 的 JSON 数据在 Html 网页中显示 [Object Object]
Posted
技术标签:
【中文标题】来自 URL 的 JSON 数据在 Html 网页中显示 [Object Object]【英文标题】：JSON data from Url showing [Object Object] in Html Webspage 【发布时间】：2022-01-10 12:47:14 【问题描述】：我有一个由数据组成的 Json Url，在该数据中我想分别打印“标题、日期和注释，但它只显示 [object object]...
我想打印“事件”列表中包含“标题”、“日期”和“注释”的数据
Json 文件的链接：- https://www.gov.uk/bank-holidays.json
我尝试使用事件/标题，但它也不起作用，我是 javascript 新手，我认为我犯了一个基本错误:(
提前致谢
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GFG User Details</title>
<!-- INCLUDING JQUERY-->
<script src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- CSS FOR STYLING THE PAGE -->
<style>
table
margin: 0 auto;
font-size: large;
border: 1px solid black;
h1
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans',
'Gill Sans MT', ' Calibri',
'Trebuchet MS', 'sans-serif';
td
background-color: #E4F5D4;
border: 1px solid black;
th,
td
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
td
font-weight: lighter;
</style>
</head>
<body>
<section>
<h1>Display Table</h1>
<!-- TABLE CONSTRUCTION-->
<table id='table'>
<!-- HEADING FORMATION -->
<tr>
<th>notes</th>
<th>title</th>
<th>date</th>
<th>Division</th>
</tr>
<script>
$(document).ready(function ()
// FETCHING DATA FROM JSON FILE
$.getJSON("https://www.gov.uk/bank-holidays.json",
function (data)
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value)
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
student += '<tr>';
student += '<td>' +
value.events + '</td>';
student += '<td>' +
value.date + '</td>';
student += '<td>' +
value.notes + '</td>';
student += '<td>' +
value.division + '</td>'
student += '</tr>';
);
//INSERTING ROWS INTO TABLE
$('#table').append(student);
);
);
</script>
</section>
</body>
</html>
【问题讨论】：
【参考方案1】：所以这解决了你的问题@maddy。 问题是您正在访问的内容。您必须访问对象内部的事件数组。所以这里是一个示例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GFG User Details</title>
<!-- INCLUDING JQUERY-->
<script src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- CSS FOR STYLING THE PAGE -->
<style>
table
margin: 0 auto;
font-size: large;
border: 1px solid black;
h1
text-align: center;
color: #006600;
font-size: xx-large;
font-family: 'Gill Sans',
'Gill Sans MT', ' Calibri',
'Trebuchet MS', 'sans-serif';
td
background-color: #E4F5D4;
border: 1px solid black;
th,
td
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
td
font-weight: lighter;
</style>
</head>
<body>
<section>
<h1>Display Table</h1>
<!-- TABLE CONSTRUCTION-->
<table id='table'>
<!-- HEADING FORMATION -->
<tr>
<th>notes</th>
<th>title</th>
<th>date</th>
<th>Division</th>
</tr>
<script>
$(document).ready(function ()
// FETCHING DATA FROM JSON FILE
$.getJSON("https://www.gov.uk/bank-holidays.json",
function (data)
var student = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value)
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
// map the events array in value to have access to the required object
$.each(value.events, function(key1, val)
student += '<tr>';
student += '<td>' +
val.notes + '</td>';
student += '<td>' +
val.title + '</td>';
student += '<td>' +
val.date + '</td>';
student += '<td>' +
value.division + '</td>'
student += '</tr>';
);
);
//INSERTING ROWS INTO TABLE
$('#table').append(student);
);
);
</script>
</section>
</body>
</html>【讨论】：
是的，这个对我有用！感谢您的救援jojitoon！ :)【参考方案2】：[object object] 是您要获取的数据的数据类型。要获取实际数据，您需要解析 json-data。 （解析：解压）
当您通过 Internet 获取某些内容时（至少使用 http-api），您会收到响应，但该响应无法发送 javascript 对象，因此您可以使用函数对其进行字符串化（例如：JSON.stringify(data)） .
Javascript 的内置 JSON 对象具有执行此操作所需的方法。
要在获取此数据时访问此数据，请使用JSON.parse(data)
【讨论】：
以上是关于来自 URL 的 JSON 数据在 Html 网页中显示 [Object Object]的主要内容，如果未能解决你的问题，请参考以下文章
使用循环在 HTML 中显示来自 jQuery.ajax 的 json 数据
通过 jQUERY 将 JSON 数据从 URL 解析为 HTML