My current goal is to collect data from the crypto compare API and display it in a table format. Although I am able to generate the necessary elements and append them to the table body, I am facing an unusual issue. Each time I use a for loop to iterate through individual coin data, all 100 coins are displayed in a single row rather than separating each coin into its own respective row.
Interestingly, when I manually assign a number instead of iterating through the data, the table displays a single coin per row as intended.
I have attempted storing the class names in variables and then appending the data to these variable classes, but this approach did not resolve the issue.
for (let i = 0; i < $marketCapNumber; i++) {
$('.a').append(
"<tr class='tableRowData'>" +
"<td class='rank data' id = '1'> </td>" +
"<td class='name data' id = '2'> </td>" +
"<td class=' symbol data' id= '3'> </td>" +
"<td class=' marketCap data' id ='4'> </td>" +
"<td class='price data' id='5'> </td>" +
"</tr>"
);
}
//data from the API
for (let j = 0; j < 100; j++) {
// Name
let name = data.Data[j].CoinInfo.FullName;
// symbol e.g btc, xrp, ltc
let symbol = data.Data[j].DISPLAY.USD.FROMSYMBOL;
// price
let price = data.Data[j].DISPLAY.USD.PRICE;
// marketcap
let $marcketCap = data.Data[j].DISPLAY.USD.MKTCAP;
// created inputs
const $nameOfCoin = $('<p>').text(`${name}`);
const $ticker = $('<p>').text(`${symbol}`);
const $coinprice = $('<p>').text(`${price}`);
const $totalMarketCap = $('<p>').text(`${$marcketCap}`);
// assigning variable to class names
const nameClass = $('.name');
const symbolClass= $('.symbol');
const priceClass = $('.price');
const marketCapClass = $('.marketCap');
// append to the <td>
$(nameClass).append($nameOfCoin);
$(symbolClass).append($ticker);
$(priceClass).append($coinprice);
$(marketCapClass).append($totalMarketCap);
}
Despite my efforts, the table continues to display all coins in one row instead of organizing them individually. How can I resolve this issue so that each row in the table corresponds to one specific coin's information, rather than repeating the list of coins multiple times?