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数据两次

回答

相关问题