JSON 데이터가 jquery로 두 번 표시됩니다.

Question

두 번 호출하지는 않지만 몇 가지 이유 때문에 JSON에서 두 요소를 두 번 표시합니다. 다음은 Jquery입니다. 다음과 같이

$.getJSON('js/data.json', function(data) { 

    function rowBuilder(value) { 
      return '<tr>' 
       + '<td>' 
         + value.productList 
       + '</td>' 
       + '<td class="center">' 
         + value.sales 
       + '</td>' 
       + '<td class="center">' 
         + value.awards 
       + '</td>' 
      + '</tr>'; 
    } 

    $.each(data.productRewards, function(k,v){ 
     $('#details tbody').append(rowBuilder(v)); 
    }); 

}); 

내 JSON이다 : 그것은 10 개 항목을 표시

{ "productRewards":[ 
{ 
    "productList": "New Sales", 
    "sales": "25", 
    "awards": "500" 
}, 
{ 
    "productList": "TV", 
    "sales": "12", 
    "awards": "18" 
}, 
{ 
    "productList": "TV Completers", 
    "sales": "7", 
    "awards": "210" 
}, 
{ 
    "productList": "HSI Enhanced", 
    "sales": "15", 
    "awards": "150" 
}, 
{ 
    "productList": "MODULE", 
    "sales": "68", 
    "awards": "360" 
} 
] 
} 

. 어떤 도움이라도 대단히 감사하겠습니다.

$('#details tbody').html(""); 
$.each(data.productRewards, function(k,v){ 
    $('#details tbody').append(rowBuilder(v)); 
}); 

을하지만 당신의 코드는이 바이올린에서 잘 작동 :

Answer 1

<tbody>의 내용을 지우려면이 시도 JSFiddle

Answer 2

당신은 아무것도에게

를 추가하기 전에 테이블의 내용을 재설정 해보십시오

$('#details tbody').empty(); 

$.each(data.productRewards, function(k,v){ 
    $('#details tbody').append(rowBuilder(v)); 
}); 

Answer 3

Worklight with Jquery에서 작업하는 동안이 문제가 발생했습니다. 여러 Jquery 핵심 파일이 포함되어있었습니다. Jquery 핵심 파일을 html의 머리 부분에 한 번 포함 시켰습니다. Jquery 모바일도 사용하는 경우 페이지 끝에 해당 파일을로드해야합니다. 스크립트가로드되는 시점과 함수에 대한 호출이 모두 있습니다.

Answer 4

귀하의 HTML이 정확히 어떻게 구성되어 있는지 모르겠지만 여기서는 작동하는 예제가 있습니다. $.getJSON()이 다른 곳에서 두 번 호출되지 않는지 확인하십시오 (수백 개의 데이터 레코드가있는 경우 더 큰 문제가 발생할 수 있음). 그러나 이렇게하면 테이블에 두 번 나타나는 레코드 문제가 해결됩니다.

HTML

<table id="details"> 
    <thead><th>Product</th><th>Sales</th><th>Awards</th></thead> 
    <tbody></tbody> 
</table> 

자바 스크립트

/** Sample JSON from the server. */ 
var json = { 
    "productRewards": [{ 
     "productList": "New Sales", 
      "sales": "25", 
      "awards": "500" 
    }, { 
     "productList": "TV", 
     "sales": "12", 
     "awards": "18" 
    }, { 
     "productList": "TV Completers", 
     "sales": "7", 
     "awards": "210" 
    }, { 
     "productList": "HSI Enhanced", 
     "sales": "15", 
     "awards": "150" 
    }, { 
     "productList": "MODULE", 
     "sales": "68", 
     "awards": "360" 
    }] 
}; 

/** Row builder */ 
var rowBuilder = function (value) { 
    return '<tr>' + '<td>' + value.productList + '</td>' + '<td class="center">' + 
    value.sales + '</td>' + '<td class="center">' + value.awards + '</td>' + '</tr>'; 
}; 

/** Loop through JSON and build the grid. */ 
var buildGrid = function() { 
    var $tContext = $('#details tbody'); 
    $tContext.empty(); 
    $.each(json.productRewards, function (i, data) { 
     $tContext.append(rowBuilder(data)); 
    }); 
}();