首页 > 解决方案 > jQuery追加重复循环

问题描述

我正在尝试附加一些循环中的信息,并且我在 console.log 上得到了正确的结果,但是在附加它之后,每个结果都被附加了几次

我的代码:

let success = function(res) {
        let coinsRedemption = res['coinsRedempt']
        let rewardsRedemption = res['rewardsRedempt']

for(i=0; i<coinsRedemption.length;i++){
    let coinType = coinsRedemption[i]['coin_type']
    let coinTime = coinsRedemption[i]['visit_date']
    let firstName = coinsRedemption[i]['first_name']

    for(j=0; j<rewardsRedemption.length; j++){
        let rewardName = rewardsRedemption[i]['reward_name']
        let rewardDateClaimed = rewardsRedemption[i]['date_claimed']
        let rewardCompleteDate = rewardsRedemption[i]['complete_date']
        let firstName1 = rewardsRedemption[i]['first_name']

        $('#redeemptionsTable tbody').append(`
        <tr class='redempTableRows'>
            <td class='coin-redemption'>${coinType}</td>
            <td class='coin-redemption-time'>${coinTime}</td>
            <td class='coin-redemption-location'> ${firstName}</td>
        </tr>
        <tr class='rewardRedempTableRows'>
            <td class='reward-redemption'>${rewardName}</td>
            <td class='reward-redemption-time'>${rewardDateClaimed}</td>
            <td class='reward-redemption-location'>${firstName1}</td>
        </tr> `)
    }

结果

在此处输入图像描述

我怎样才能避免让它只附加一次结果?

PS:我已经研究过回答相同问题的问题,但它们并没有帮助我。

标签: javascriptjquery

解决方案


redempTableRows行应该在外循环中输出,而不是内循环。

let success = function(res) {
  let coinsRedemption = res['coinsRedempt']
  let rewardsRedemption = res['rewardsRedempt']

  for (i = 0; i < coinsRedemption.length; i++) {
    let coinType = coinsRedemption[i]['coin_type']
    let coinTime = coinsRedemption[i]['visit_date']
    let firstName = coinsRedemption[i]['first_name']
    $("#redemptionsTable tbody").append(`
      <tr class='redempTableRows'>
          <td class='coin-redemption'>${coinType}</td>
          <td class='coin-redemption-time'>${coinTime}</td>
          <td class='coin-redemption-location'> ${firstName}</td>
      </tr>`);
    for (j = 0; j < rewardsRedemption.length; j++) {
      let rewardName = rewardsRedemption[i]['reward_name']
      let rewardDateClaimed = rewardsRedemption[i]['date_claimed']
      let rewardCompleteDate = rewardsRedemption[i]['complete_date']
      let firstName1 = rewardsRedemption[i]['first_name']

      $('#redeemptionsTable tbody').append(`
        <tr class='rewardRedempTableRows'>
            <td class='reward-redemption'>${rewardName}</td>
            <td class='reward-redemption-time'>${rewardDateClaimed}</td>
            <td class='reward-redemption-location'>${firstName1}</td>
        </tr> `)
    }
  }
}


推荐阅读