Clash Royale CLAN TAG#URR8PPP

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

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.

2 Answers
2

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

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.

html

<tr><tr><tr><tr></tr>

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

totalCells

array

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.