當推送到DOM時JSON數據顯示重複

Question

你好新手在這裏試圖找出我的jQuery代碼有什麼問題。該代碼應該從API中提取地震信息並將其顯示在DOM中。問題是我在DOM中看到重複的信息，但如果我使用控制檯調用來顯示該信息，那麼它們都是唯一的。

HTML：

<div class="control-wrapper"> 
    <h2>Start date: <input type="text" id="datepicker"></h2> 
    <h2>End date: <input type="text" id="datepicker_2"></h2> 
    <button id="generate">Generate</button> 
</div> 

<h2>Total # of EQ's: <span id="total"></span></h2> 
<div class="wrapper" id="template"> 
    <h1>Name: <span id="title"></span></h1> 
    <h3>Magnitued: <span id="mag"></span></h3> 
    <h3>Tsunami Warning: <span id="tsunami"></span></h3> 
</div> 

的jQuery：

$(document).ready(function(){ 
    var scriptString = 'https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime='; 
    var button = $('#generate'); 

    /**DATEPICKER**/ 
    var startDate = 0; 
    var endDate = 0; 
    $('#datepicker').datepicker(); 
    $('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd'); 
    $('#datepicker_2').datepicker(); 
    $('#datepicker_2').datepicker('option', 'dateFormat', 'yy-mm-dd'); 

    /** GENERATE BUTTON ON CLICK **/ 
    button.on('click', function(){ 
    startDate = $('#datepicker').val(); 
    endDate = $('#datepicker_2').val(); 
    scriptString = scriptString + startDate +'&endtime=' + endDate; 
    makeRequest(scriptString); 
    }); 
}); 

/** MAKEREQUEST EXECUTES AFTER THE GENERATE BUTTON IS CLICKED **/ 
function makeRequest(requestString){ 
    var myRequest; 
    var eqs = []; 

    var myRequest = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 
    myRequest.onreadystatechange = function(){ 
    if(myRequest.readyState === 4 && myRequest.status === 200){ 
     var jsonObj = JSON.parse(myRequest.responseText);//Grabs json object 
     var data = jsonObj.features; 
     pushToDOM(data); 
    } 
    } 
    myRequest.open("GET", requestString, true); 
    myRequest.send(); 
} 

/** RECIEVES ARRAY OF EQS AND PUSHES THE FIRST TO THE DOM **/ 
function pushToDOM(eqs){ 
    var tot = $('#total'); 
    tot.text(eqs.length); 

    /*ADDS EQs TO DOM*/ 
    for(x in eqs){ 
    var wrap = $('.wrapper').clone(); 
    wrap.attr('id', x); 
    var place = eqs[x].properties.place; 
    var mag = eqs[x].properties.mag; 
    var tsu = eqs[x].properties.tsunami; 
    wrap.find('#title').text(place); 
    wrap.find('#mag').text(mag); 
    if(tsu === 0){ 
     wrap.find('#tsunami').text('No'); 
    } 
    else{ 
     wrap.find('#tsunami').text('Yes'); 
    } 
    $('body').delay().append(wrap); 
    if(x === 10){ 
     break; 
    } 
    } 
} 

Codepen

PS：我寫劇本的方式似乎是因爲它顯示信息，以便之前鎖定了瀏覽器是一個問題，如果有什麼方法來改進我的代碼結構或算法，請讓我知道。

謝謝！

Answer 1

首先，你的代碼有幾個問題。您需要花時間並瀏覽幾個jQuery教程。

現在，這些是我在下面確定和解決的問題。

• jQuery始終將操作應用於所有匹配的元素。因此，不需要單獨初始化日期選擇器。
• jQuery有built-in Ajax support。不要使用手動滾動的XmlHttpRequest代碼，特別是不要使用從某些網站複製的代碼（這通常是正確的：不要複製和粘貼您不明白的代碼）。
• jQuery負責URL參數編碼，您可以將參數作爲對象傳遞，如下所示。
• jQuery爲你做JSON解析，所以這也不是問題。
• 克隆HTML元素時，請確保它們不包含任何id屬性。 ID在整個文檔中應該是唯一的，重複的ID會破壞內容。使用CSS類來標識元素的類型。
• 當第二次點擊按鈕時，您需要刪除所有以前添加的元素。這將解決您的重複問題。
• 數據加載時禁用按鈕是一個很好的接觸，所以設置日期字段的默認值。
• 您應該在$.getJSON()調用中添加某種錯誤處理（請參閱documentation for the jQuery XHR object中的.fail()的用法）。

運行的代碼示例如下：

$(function() { 
 
    $('.datepicker').datepicker({dateFormat: 'yy-mm-dd'}); 
 
    $('#starttime').datepicker("setDate", "-1d"); 
 
    $('#endtime').datepicker("setDate", "0d"); 
 

 
    $('#generate').on('click', function() { 
 
    $('#generate').text("loading...").prop("disabled", true); 
 
    $('#total').text(""); 
 

 
    $.getJSON('https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson', { 
 
     starttime: $('#starttime').val(), 
 
     endtime: $('#endtime').val() 
 
    }).done(function (geoJson) { 
 
     $('#total').text(geoJson.features.length); 
 
     $('.earthquake').remove(); 
 

 
     $.each(geoJson.features, function (i, feature) { 
 
     var $item = $('#earthquake-template').clone().removeAttr("id").addClass("earthquake"); 
 

 
     $item.find('.place').text(feature.properties.place); 
 
     $item.find('.tsunami').text(feature.properties.tsunami ? 'Yes' : 'No'); 
 
     $item.find('.mag').text(feature.properties.mag); 
 
     $item.appendTo('body'); 
 
     }); 
 
    }).fail(function (jqXhr, status, error) { 
 
     alert("Could not fetch earthquake info - " + error); 
 
    }).always(function() { 
 
     $('#generate').text('Generate').prop('disabled', false); 
 
    }); 
 
    }); 
 
});

h1, h2, h3 { font-size: small; } 
 
#earthquake-template { display: none; } 
 
.earthquake { border: 1px solid silver; margin-top: 5px; } 
 
div.ui-datepicker { font-size:10px; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="control-wrapper"> 
 
    <h2>Start date: <input type="text" class="datepicker" id="starttime"></h2> 
 
    <h2>End date: <input type="text" class="datepicker" id="endtime"></h2> 
 
    <button id="generate">Generate</button> 
 
</div> 
 

 
<h2>Total # of EQ's: <span id="total"></span></h2> 
 
<div id="earthquake-template"> 
 
    <h1>Name: <span class="place"></span></h1> 
 
    <h3>Magnitude: <span class="mag"></span></h3> 
 
    <h3>Tsunami Warning: <span class="tsunami"></span></h3> 
 
</div>