jQuery顯示AJAX/API數據兩次

這似乎是一個常見問題，我找不到明確的答案。jQuery顯示AJAX/API數據兩次

我正在使用API通過AJAX調用來拉取JSON數據。我返回的數據在控制檯和DOM中顯示兩次。

$(document).ready(function() { 
    $('.btn').click(function(){ 
    var $dataHere = $('.dataHere'); 
    var company = "square205"; 
    var key = "xxx"; 
    var action = "time_entries.json?callback=?"; 
    console.debug() 
    $.ajax({ 
      url: 'https://' + company + '.teamwork.com/' + action, 
      headers: {"Authorization": "BASIC " + window.btoa(key + ":xxx")}, 
     dataType: 'JSON', 
     // billableType: "billable", 
     page: "1", 
     success: function(data) { 
      $.each(data, function(i, projects) { 
      $dataHere.append('<div class="item"><p>Project name: ' + data["time-entries"][0]["project-name"] + '</p>' +'<p>Task name: ' + data["time-entries"][0]["todo-item-name"] + '</p>' + '<p>Hours: ' + data["time-entries"][0]["hours"] + '</p></div>'); 
      console.log(data); 
      }); 
     } 
     }); 
    }); 
});

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>S205 TIME LORD</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="main.js" charset="utf-8"></script> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
<body> 
<span class="timeLordTitle"> 
    <img class="logo" src="http://square205.com/wp-content/themes/square205/images/logo-white.png" alt=""><strong> TIME LORD</strong></span> 
<div class="btn"> 
    <div class="hexagon"> 
     <div class="hexTop"></div> 
     <div class="hexBottom"></div> 
    </div> 
</div> 
</br> 
<div class="dataHere"></div> 
</body> 
</html>

來源

2017-07-02 Antonio Nogueras

因爲您正在使用'$ .each'。循環遍歷數據對象的每個屬性。如果該對象中有多個屬性，它將被多次調用。 –

您已經使用過data [「time-entries」] [0]，** 0 **，它應該是可變的，並且$ .each遍歷每個DOM元素。所以，如果你有多個元素，它會多次打印輸出。 [jquery each]（https://api.jquery.com/each/） – singhpradeep

根據[mcve]提供樣本數據和預期結果 – charlietfl

更新：。

我想通API回調JSON數據返回兩個屬性：STATUS和time-entries對象中的數據，這意味着循環迭代了可用的屬性數量（2）。我修改了代碼，將其更改爲這一行所以它只能通過一個屬性循環。

$.each(data["time-entries"], function(i, projects) {...}

來源

2017-07-03 18:01:01

您是硬編碼的第0指數。使用i代替0

$.each(data, function(i, projects) { 
      $dataHere.append('<div class="item"><p>Project name: ' + data["time-entries"][i]["project-name"] + '</p>' +'<p>Task name: ' + data["time-entries"][i]["todo-item-name"] + '</p>' + '<p>Hours: ' + data["time-entries"][i]["hours"] + '</p></div>'); 

      });

來源

2017-07-02 16:48:00

'$ .each'正在循環'data'屬性，而不是'data ['time-entries']' –

您是否嘗試過取消綁定點擊下面？

$（ 'BTN '）解除綁定（' 點擊'）點擊（函數（）{ ...... }

來源

2017-07-03 15:02:51 Kelvin

我給它一個鏡頭。相同的結果，沒有錯誤。我確實將console.log（data）移到了$ .ajax調用之外，並且它只顯示一次。 –

jQuery顯示AJAX/API數據兩次

回答

相關問題