Display JSON data HTML - Undefined

Question

Hi everyone I am new in programming. I want to display json data in HTML table jquery. The output that I receive from the server is: undefined. I want to display a table with events on a page. The events list would be constantly updated in json file.

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);
    });
});

Example json

{
  "events": [
    {
      "id": 40818,
      "title": "Customer Service",
      "venue": "online",
      "location": null,
      "contact_email": "[email protected]",
      "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"
    },
}

If "the output that you receive from the server is: undefined", you need to figure out what's wrong with that endpoint and/or server. — goto
– goto, Commented Sep 2, 2020 at 10:28
@goto it's not, OP is looping through the wrong "field" of the response — fdomn-m
– fdomn-m, Commented Sep 2, 2020 at 10:35

jishan siddique · Accepted Answer · 2020-09-02 10:37:11Z

Hi can you please check this link -> Click me

                var data = {
  "events": [
    {
      "id": 40818,
      "title": "Customer Service",
      "venue": "online",
      "location": null,
      "contact_email": "[email protected]",
      "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": "[email protected]",
      "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>

fdomn-m · Accepted Answer · 2020-09-02 10:27:30Z

You need to loop through data.events not just data.

$.each(data.events, function(key, value) {

Updated snippet

//$.getJSON("events.json", function(data){
var data = {
  "events": [{
    "id": 40818,
    "title": "Customer Service",
    "venue": "online",
    "location": null,
    "contact_email": "[email protected]",
    "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);

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

Collectives™ on Stack Overflow

Display JSON data HTML - Undefined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related