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
– K-Log, Commented Aug 8, 2018 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
– Vanessa Kim, Commented Aug 8, 2018 at 18:59
Take a moment and read How to Javascript Debugging line by line using Google Chrome. The actual problem is very basic. — Erik Philips
– Erik Philips, Commented Aug 8, 2018 at 19:23

Ryan Gibbs · Accepted Answer · 2018-08-08 19:16:29Z

1

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

answered Aug 8, 2018 at 19:16

Ryan Gibbs

1,3201 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anthony Gingrich · Accepted Answer · 2018-08-08 19:43:13Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related