json 데이터가있는 ajax 자동 업데이트 테이블

Question

안녕하세요. 처음에는 js 또는 jquery에 대한 경험이별로 없지만 아직 내 기술을 연구하고 있습니다.

테이블이 있는데이 테이블의 데이터는 영향을받지 않는 외부 json 파일에서 가져옵니다.

테이블을 만드는 것은 잘되지만, 다음 단계는 테이블의 데이터를 "x"초마다 새로 고치는 것입니다.

나는 약간 연구를했지만 나는 지금까지 어떤 solutin도 찾을 수 없었다.

테이블 그 자체 :

$(document).ready(function() { 
refreshTable(); 
$.getJSON(getshowObjectReportExtern, function(data){ 
    var vehicleListData = ''; 
    $.each(data, function(key, value){ 
     vehicleListData += '<tr id="rowVehicleStatus" class="">'; 
     vehicleListData += '<td>'+value.objectno+'</td>'; 
     vehicleListData += '<td>'+value.objectname+'</td>'; 
     //vehicleListData += '<td>'+value.objectgroupname+'</td>'; 
     vehicleListData += '<td>'+value.postext_short+'</td>'; 
     vehicleListData += '<td>'+value.latitude_mdeg+'</td>'; 
     vehicleListData += '<td>'+value.longitude_mdeg+'</td>'; 
     vehicleListData += '<td>'+value.pos_time+'</td>'; 
     vehicleListData += '<td>'+value.ignition+'</td>'; 
     vehicleListData += '<td>'+value.standstill+'</td>'; 
     vehicleListData += '</tr>';  
    }); 
    $('#vehicleList').append(vehicleListData); 


}); 

function refreshTable(){ 
    $('#vehicleList').load(getshowObjectReportExtern, function(){ 
     setTimeout(refreshTable, 5000); 
    }); 

}); 

순간에 결과 테이블이 작성 될 것을

하지만 이후 :

<table class="table table-hover"> 
<thead> 
    <tr> 
     <th>Number</th> 
     <th>Sign</th> 
     <!--<th>Group</th>--> 
     <th>Location</th> 
     <th>N</th> 
     <th>E</th> 
     <th>On position</th> 
     <th>Ignition on</th> 
     <th>Moving</th> 
    </tr> 
</thead> 
<tbody id="vehicleList"> 

</tbody> 
</table> 

코드, 테이블을 생성하는 다음과 같다 먼저 원시 json 데이터를 다시로드하여 테이블에 추가합니다.

나를위한 조언이 있습니까? 미리 감사드립니다. !

Answer 1

setTimeout 이름에서 알 수 있듯이 실행하기 전에 일정 기간 기다려야합니다. setInterval 그러나 간격 호출자는 n 초마다 실행됩니다. 서명 방법을 그 것으로 변경해야합니다.

그러나 다른 기능이 있습니다. 추가하기 전에 테이블에서 이전에 동적으로 추가 된 항목을 제거하지 않으므로 간격이 실행될 때마다 동일한 행이 추가됩니다. 이를 피하려면 어떤 클래스를 tbody 또는 테이블의 일부에 할당 한 다음 내용을 다시 추가하기 전에이 클래스를 지워야합니다. 이렇게하면 json 파일의 내용이 여러 번 추가되지 않습니다.

$(document).ready(function() { 
    // Fetch the initial table 
    refreshTable(); 

    // Fetch every 5 seconds 
    setInterval(refreshTable, 5000); 
}); 

function refreshTable(){ 
    $.getJSON(getshowObjectReportExtern, function(data) { 
     var vehicleListData = ''; 
     $.each(data, function(key, value) { 
      vehicleListData += '<tr id="rowVehicleStatus" class="">'; 
      vehicleListData += '<td>'+value.objectno+'</td>'; 
      vehicleListData += '<td>'+value.objectname+'</td>'; 
      //vehicleListData += '<td>'+value.objectgroupname+'</td>'; 
      vehicleListData += '<td>'+value.postext_short+'</td>'; 
      vehicleListData += '<td>'+value.latitude_mdeg+'</td>'; 
      vehicleListData += '<td>'+value.longitude_mdeg+'</td>'; 
      vehicleListData += '<td>'+value.pos_time+'</td>'; 
      vehicleListData += '<td>'+value.ignition+'</td>'; 
      vehicleListData += '<td>'+value.standstill+'</td>'; 
      vehicleListData += '</tr>';  
     }); 

     // We use .html instead of .append here, to make sure we don't add the same 
     // entries when the interval is ran for the n-th time. 
     $('#vehicleList').html(vehicleListData); 
    }); 
} 

Answer 2

x 초마다 표를 새로 고치려면 setInterval() 함수를 사용해야합니다.