Question

大家好，我是编程新手。我想在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.&nbsp;</span></h3>\r\n\r\n<p>This should not be the case!&nbsp;Serving your customers better and putting them at the heart of your business model is key to your success.&nbsp;Join me.</p>\r\n",
      "attendees_count": 1,
      "status": "published",
      "categories": [
        "webinar"
      ],
      "sharing_url": "https://google.com"
    },
}

Answer 1

您好，请检查此链接-> Click me

                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.&nbsp;</span></h3>\r\n\r\n<p>This should not be the case!&nbsp;Serving your customers better and putting them at the heart of your business model is key to your success.&nbsp;Join me.</p>\r\n",
      "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.&nbsp;</span></h3>\r\n\r\n<p>This should not be the case!&nbsp;Serving your customers better and putting them at the heart of your business model is key to your success.&nbsp;Join me.</p>\r\n",
      "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>

Answer 2

您需要遍历reflection而不仅仅是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.&nbsp;</span></h3>\r\n\r\n<p>This should not be the case!&nbsp;Serving your customers better and putting them at the heart of your business model is key to your success.&nbsp;Join me.</p>\r\n",
    "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);

显示JSON数据HTML-未定义

2 个答案: