How can i insert objects into a HTML table using JavaScript / AJAX

Question

I am trying to create a site that takes information form a music forum by searching an artist name and populates the artist 5 top albums, by popularity, number of tracks and release date. The information is pulling correctly from the site but when I go to create and HTML table no information is displayed. Search button is function properly, its calling all the right information, can help provide a solution in which I can extract the information from the array and populate/ create a table in HTML? below is the code I am currently working with.

function searchClicked() {
   var artist_name = document.getElementById("artistName").value;

   var data = {};
   data.ArtistName = artist_name
    $.ajax({
        type: "POST",
        url: "/Home/SearchAlbum",
        data: JSON.stringify(data),
        success: function (responseData) {
            debugger;
            function writeTable() {
                var html = ''
                for (var i = 0; i < responseData; i++)
                    html += '<tr>';
                for (var j = 0; j < totalCells; j++) {
                    html += '<td>' + array[count] + '</td>';
                    count++;
                }
                html += '</tr>';
            }
            
            $('#body').append(html);
            
            count = 0;
            
        },
                 contentType: "application/json; charset=utf-8",
   })

table {
    width: 100%
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

th, td {
    padding: 5px;
    text-align: left;
}

table#artistName tr:nth-child(even) {
    background-color: aquamarine
}

table#artistName tr:nth-child(odd) {
    background-color: aquamarine
}

table#artistName th {
    background-color: black;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron">
   <p> Enter Artist Name:</p>
   <input id="artistName" type="text" />
   <button id="seachButton" onclick="searchClicked()">seach</button>
 </div>


<table id="ALbumInfo">
  <thead>
     <tr>
      <th>Album Name </th>
      <th>Release Date</th>
      <th>Popularity</th>
      <th>Number of Tracks</th>
     </tr>
  </thead>
  <tbody></tbody>
</table>

I Really want to understand whats going wrong here.

So I am not seeing where you are trying to actually put the data into the table. Do have any code that actually attempts to do that or am I just missing it? — K-Log, Aug 08 '18 at 18:04
I've tried multiple ways, this is the one I am currently trying but I am getting absolutely no response. — Vanessa Kim, Aug 08 '18 at 18:59
Take a moment and read How to [Javascript Debugging line by line using Google Chrome](https://stackoverflow.com/questions/10638059/javascript-debugging-line-by-line-using-google-chrome). The actual problem is very basic. — Erik Philips, Aug 08 '18 at 19:23

score 1 · Answer 1 · answered Aug 08 '18 at 19:16

Assuming you're gettting the data you need back from that post request, I believe that the issue might be with:

$('#body').append(html);

That selector looks for an element with an id='body', which you do not have in your html. Instead, try using:

$('tbody').append(html);

Or put that id on your tbody html tag:

<tbody id='body'></tbody>

Then your script will append to that control.

Moving forwards try checking the developer's console to see errors your code is throwing. I would imagine you are getting an error with your code as is (CTRL-SHIFT-I or right click and choose inspect, depending on your web browser).

score 0 · Answer 2 · answered Aug 08 '18 at 19:43

If you were to flow this out with sample records, you'll notice that the variable html will have a value similar to this: <tr><tr><tr><tr></tr>--depending on how many records were returned from your AJAX request.

This, of course, assumes that the runtime doesn't crash due to totalCells being undefined. (As well as array and count.)

There are much better approaches to your problem, too. I would recommend:

    var table = $('<table><tbody></tbody></table>');
    var tbody = table.children('tbody');

    for (var i = 0; i < responseData.length; i++) {
        var tr = $('<tr></tr>');

        for (c = 0; c < totalCells; c++) {
            tr.append($('<td></td>').html(array[c]));
        }

        tbody.append(tr);
    }

    $('body').append(table);

How can i insert objects into a HTML table using JavaScript / AJAX

2 Answers2