大家好，我是编程新手。我想在HTML表jquery中显示json数据。我从服务器收到的输出是：未定义。我想在页面上显示一个包含事件的表。事件列表将在json文件中不断更新。
Html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-stripped" id="events_table">
<tr>
<th>Title</th>
<th>Venue</th>
<th>Date</th>
<th>Description</th>
<th>URL</th>
</tr>
</table>
</div>
</div>
</body>
Jquery
<script>
$(document).ready(function(){
$.getJSON("events.json", function(data){
var events_data = '';
$.each(data, function(key, value){
events_data += '<tr>';
events_data += '<td>'+value.title+'</td>';
events_data += '<td>'+value.venue+'</td>';
events_data += '<td>'+value.start_date+'</td>';
events_data += '<td>'+value.html_description+'</td>';
events_data += '<td>'+value.sharing_url+'</td>';
events_data += '<tr>';
});
$('#events_table').append(events_data);
});
});
json 示例
{
"events": [
{
"id": 40818,
"title": "Customer Service",
"venue": "online",
"location": null,
"contact_email": "demo@demo.com",
"contact_phone_number": "002",
"public": true,
"created_at": "2020-09-02T06:52:05Z",
"start_date": "2020-09-15T00:00:00Z",
"end_date": "2020-09-15T01:00:00Z",
"html_description": "<h3><span style="background-color:null;">Customer Service can always be a bit of a mine-field and something that is all too often an afterthought for some businesses. </span></h3>rnrn<p>This should not be the case! Serving your customers better and putting them at the heart of your business model is key to your success. Join me.</p>rn",
"attendees_count": 1,
"status": "published",
"categories": [
"webinar"
],
"sharing_url": "https://google.com"
},
}
嗨，你能检查一下这个链接吗？->点击我
var data = {
"events": [
{
"id": 40818,
"title": "Customer Service",
"venue": "online",
"location": null,
"contact_email": "demo@demo.com",
"contact_phone_number": "002",
"public": true,
"created_at": "2020-09-02T06:52:05Z",
"start_date": "2020-09-15T00:00:00Z",
"end_date": "2020-09-15T01:00:00Z",
"html_description": "<h3><span style="background-color:null;">Customer Service can always be a bit of a mine-field and something that is all too often an afterthought for some businesses. </span></h3>rnrn<p>This should not be the case! Serving your customers better and putting them at the heart of your business model is key to your success. Join me.</p>rn",
"attendees_count": 1,
"status": "published",
"categories": [
"webinar"
],
"sharing_url": "https://google.com"
},
{
"id": 40819,
"title": "Customer Service 2",
"venue": "online",
"location": null,
"contact_email": "demo@demo.com",
"contact_phone_number": "002",
"public": true,
"created_at": "2020-09-02T06:52:05Z",
"start_date": "2020-09-15T00:00:00Z",
"end_date": "2020-09-15T01:00:00Z",
"html_description": "<h3><span style="background-color:null;">Customer Service can always be a bit of a mine-field and something that is all too often an afterthought for some businesses. </span></h3>rnrn<p>This should not be the case! Serving your customers better and putting them at the heart of your business model is key to your success. Join me.</p>rn",
"attendees_count": 1,
"status": "published",
"categories": [
"webinar"
],
"sharing_url": "https://google.com"
},
]
};
var events_data = [];
$.each(data.events, function(key, value){
events_data.push('<tr>');
events_data.push('<td>'+value.title+'</td>');
events_data.push('<td>'+value.venue+'</td>');
events_data.push('<td>'+value.start_date+'</td>');
events_data.push('<td>'+value.html_description+'</td>');
events_data.push('<td>'+value.sharing_url+'</td>');
events_data.push('<tr>');
});
$('#events_table').append(events_data.join(" "));<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-stripped" id="events_table">
<tr>
<th>Title</th>
<th>Venue</th>
<th>Date</th>
<th>Description</th>
<th>URL</th>
</tr>
</table>
</div>
</div>
</body>您需要循环通过data.events，而不仅仅是data。
$.each(data.events, function(key, value) {
更新的片段
//$.getJSON("events.json", function(data){
var data = {
"events": [{
"id": 40818,
"title": "Customer Service",
"venue": "online",
"location": null,
"contact_email": "demo@demo.com",
"contact_phone_number": "002",
"public": true,
"created_at": "2020-09-02T06:52:05Z",
"start_date": "2020-09-15T00:00:00Z",
"end_date": "2020-09-15T01:00:00Z",
"html_description": "<h3><span style="background-color:null;">Customer Service can always be a bit of a mine-field and something that is all too often an afterthought for some businesses. </span></h3>rnrn<p>This should not be the case! Serving your customers better and putting them at the heart of your business model is key to your success. Join me.</p>rn",
"attendees_count": 1,
"status": "published",
"categories": [
"webinar"
],
"sharing_url": "https://google.com"
}]
};
var events_data = '';
$.each(data.events, function(key, value) {
events_data += '<tr>';
events_data += '<td>' + value.title + '</td>';
events_data += '<td>' + value.venue + '</td>';
events_data += '<td>' + value.start_date + '</td>';
events_data += '<td>' + value.html_description + '</td>';
events_data += '<td>' + value.sharing_url + '</td>';
events_data += '<tr>';
});
$('#events_table').append(events_data);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-stripped" id="events_table">
<tr>
<th>Title</th>
<th>Venue</th>
<th>Date</th>
<th>Description</th>
<th>URL</th>
</tr>
</table>
</div>
</div>