javascript - 如何修复从 api 传入的数据以在表格中正确显示？

Question

我正在尝试将从 API 加密比较中收集的数据收集并显示到表格中。我能够生成并将它们附加到表体。我一直遇到这个奇怪的问题，每次我用 for 循环迭代时，硬币的每个单独数据都不会进入每一行，而是将所有数据，所有 100 个放入 1 行。

当我将 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);

}

我希望遍历每个硬币并将该硬币信息添加到一行数据中，而不是将整个硬币列表添加到每一行的一行中。每当我取消 for 循环并为其分配一个数字时，它都会将硬币信息单独放在行中。我要如何解决这个问题，因为我试图传入与数组对应的每个硬币，而不是只展示一个数字 100 次？

Answer 1

创建表后执行此操作 $(priceClass).append($coinprice);那就是抓取 <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>对于表格的每一行。