如何解決從api傳入數據以正確顯示在表中的問題？

Question

我正在嘗試收集我從API加密比較收集的數據並顯示到表中。 我能夠生成並將其附加到表主體。 我一直遇到這個奇怪的問題，每次我使用for循環進行迭代時，硬幣的每個數據都不會進入每一行，而是將所有數據（全部100放入一行）。

當我將I分配給任何數字時，表格毫無問題地顯示1個硬幣，這也像預期的那樣占用了1行。

我嘗試將類名稱分配給變量，然后將數據附加到不起作用的類的變量中。

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

}

我希望遍歷每個硬幣，並將該硬幣信息添加到一行數據中，而不是將整個硬幣列表添加到每一行的1行中。 每當我拿走for循環並為其分配一個數字時，它將硬幣信息單獨放置在該行中。 因為我試圖傳遞與數組相對應的每個硬幣，而不僅僅是展示一個數字100次，我該如何解決呢？

Answer 1

創建表后，您可以執行此操作。 $(priceClass).append($coinprice); 那就是獲取表中<td class='price data' id = '5'> </td> data'id <td class='price data' id = '5'> </td>的每個實例，並將$ coinprice的值附加到每個實例中。 最后，如果我有一個由5個硬幣組成的數組1-5，我希望看到這個<td class='price data' id='5'><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p></td>對於表的每一行。