2013-03-27 3 views
1

나는 주변에서 좋은 검색을했으며 스택 오버플로에 대한 어떠한 문제도 내가 겪고있는 문제와 일치하지 않는 것으로 보입니다.JQuery JSON 데이터가 테이블에 두 번 추가됩니다.

내 서버에서 JSON 형식으로 정보를 수집하는 JQuery ajax 요청이 있습니다. 이 데이터의 구조는 다음과 같습니다.

numreturned: 6 
result: "success" 
startnumber: 0 
tickets: {ticket:[,…]} 
ticket: [,…] 
0: {id:1504, tid:932632, deptid:4, userid:0, name:customer,…} 
1: {id:1503, tid:553074, deptid:5, userid:0, name:customer,…} 
2: {id:1502, tid:106861, deptid:4, userid:0, name:customer,…} 
3: {id:1500, tid:132776, deptid:4, userid:0, name:sales,…} 
4: {id:1499, tid:413148, deptid:4, userid:0, name:sales,…} 
5: {id:1498, tid:788415, deptid:4, userid:0, name:sales,…} 
totalresults: "6" 

이 정보는 Chrome 개발자 도구에서 복사 한 것입니다. 작품의 기봉이 자바 스크립트의 비트에 의해 수행됩니다

$('#click_tickets').click(
    function(){ 
     link_make_active('#click_tickets', '#tickets'); 

     $.get('api_tickets.php?get=tickets', function(data) { 

      var data = $.parseJSON(data); 

      if(data.tickets.ticket.length === 0) { 
       $('div#tickets tr.nothing').slideDown(); 
      } else { 

       $('div#tickets tbody').html(''); 

       $(data.tickets.ticket).each(function(i,d){ 
        $('div#tickets table tbody').append(
         '<tr><td>' + '</td>' + 
         '<td>' + d.priority + '</td>' + 
         '<td>' + d.date + '</td>' + 
         '<td>' + d.name +'</td>' + 
         '<td>' + d.subject +'</td>' + 
         '<td>' + '</td></tr>' 
        ); 
       }); 

      } 

     }); 
    } 
); 

function link_make_active(link, dash) { 
    $('ul.nav li').removeClass('active'); 
    $(link).parent("li").addClass("active"); 
    $('.dashboard').slideUp(); 
    $(dash).slideDown(); 
} 

이제 문제는 자바 스크립트가 실행될 때 얻는 결과는이 상태인지 :이 데이터를 중복 어떻게

Priority Time Opened Client Subject 
Medium 2013-03-26 18:12:04 OVH OVH: Renewal of your services -  
Medium 2013-03-26 18:02:05 Twitter Tweets from 6 others  
Medium 2013-03-25 19:18:05 OVH OVH: Renewal of your services -  
Medium 2013-03-23 17:03:05 [email protected] Your thawte SSL123 Certificate Is Approved 
Medium 2013-03-23 16:45:04 [email protected] SSL123 Certificate Approval 
Medium 2013-03-23 16:44:04 [email protected] Order Information Request for 
Medium 2013-03-26 18:12:04 OVH OVH: Renewal of your services -  
Medium 2013-03-26 18:02:05 Twitter Tweets from 6 others  
Medium 2013-03-25 19:18:05 OVH OVH: Renewal of your services -  
Medium 2013-03-23 17:03:05 [email protected] Your thawte SSL123 Certificate Is Approved 
Medium 2013-03-23 16:45:04 [email protected] SSL123 Certificate Approval 
Medium 2013-03-23 16:44:04 [email protected] Order Information Request for 

공지 사항 마치 두 번 반복했다.

$(data.tickets.ticket).each(function(i,d){ 
    $('div#tickets table tbody').append(
     '<tr><td>' + '</td>' + 
     '<td>' + d.priority + '</td>' + 
     '<td>' + d.date + '</td>' + 
     '<td>' + d.name +'</td>' + 
     '<td>' + d.subject +'</td>' + 
     '<td>' + '</td></tr>' 
    ); 
    console.log(d); // Added to output to console the individual ticket content on each iteration 
}); 

을하지만 예상대로 콘솔은 데이터의 한 라운드없는 두을 보여 주었다 : 이제 나는이를 포함하여 $ .each 방법 변경으로 두 번 반복했다고 생각하지 않습니다. 당신이 생각하지 않습니다 그냥 그래서 나는 두 테이블을 만들거나 여기에 아무것도 페이지의 HTML입니다 : 이것은 지금 꽤 많은 시간 동안 저를 난처하게되었으며 어떤 도움은 매우 극명하게 될 것이다

<!-- Tickets Dashboard --> 
<div class="dashboard" id="tickets"> 
    <h1>Ticket Dashboard</h1> 
    <table> 
     <thead> 
      <tr><th>Time Open</th><th>Priority</th><th>Time Opened</th><th>Client</th><th>Subject</th><th>Product</th></tr> 
     </thead> 
     <tbody></tbody> 
     <tr class="nothing"><td colspan="5">No tickets, good work!</td></tr> 
    </table> 
</div> 

. 다들 감사 해요!

+0

"시간이 열렸습니다"의 값이 어떤 레코드에도 동일하지 않은 것으로 나타났습니다 – Arvind

+0

데이터는 6 세트이므로 처음 6 개가 표시된 후 반복됩니다. Take 첫 번째 티켓, 2013-03-26 18:12:04 열면 테이블의 7 번째 행으로 이동하면 다시 열리는 동일한 티켓이 표시됩니다. 2013-03-26 18:12:04 – onmylemon

+0

각 루프마다 $ ('div # tickets table tbody') .html()을 확인하십시오. – Arvind

답변

3

<tbody> 태그를 사용하여 브라우저에 표가 렌더링되어 있다고 생각합니다. 그 이유는 <tbody> 밖에있는
<tr class="nothing"><td colspan="5">No tickets, good work!</td></tr> 태그입니다.

이렇게 ... $('div#tickets table tbody').append(... 은 두 tbodies 각각에 테이블 행을 추가합니다.

시도해 볼 수 있습니다 :
console.log($('div#tickets table tbody').length) 나는 결과가 '2'라고 생각합니다. 이것을 방지하려면 '티켓 없음, 잘 했어!' 행을 tbody 안에 넣거나 $('div#tickets table tbody:eq(0) selector를 사용하여 첫 번째 tbody 만 가져옵니다.

+0

오늘 직장에서 집에 돌아와서이 사실을 알려 드리겠습니다. :-) – onmylemon

+0

Brilliant 대답 인 Chrome의 dom 엔진은 안에 새로운 을 만들었습니다. 코드를 리팩터링하여 을 으로 옮기고 그 안에 ajax로드가 있고 필요한 경우 자바 스크립트에 저장하여 if (data.tickets.ticket.length === 0) {}를 제거 할 수 있습니다. 성명서. 나는 당신을 업 그레 이드 하겠지만 (아직) 평판이 필요하지는 않습니다. – onmylemon

관련 문제