Json을 구문 분석하는 가장 좋은 방법은 무엇입니까?

Question

json에서 데이터를 구문 분석하고 테이블에서이를 바꿉니다. 그리고 다음 코드를 사용하고 있습니다.

var obj=$.parseJSON(data); 
data=obj.data; 
totalRecord=obj.totalCount; 
$.each(data,function(i,obj){ 
    for(var j in obj){ 
    switch(j){ 
      case 'priority': 
       $("#td_"+i+"_"+j).find('.priority').val(obj[j]); 
       $("#td_"+i+"_"+j).find('.hidden').val(obj['id']); 
       break; 
      case 'chkbox': 
       $("#td_"+i+"_"+j).find('.chkbox').val(obj['id']); 
       break; 
      case 'status': 
       var val=(this.j)?'active.gif':'deactive.gif'; 
       $("#td_"+i+"_"+j).find('img').attr('src','<?= base_url() ?>assets/grid/images/'+val); 
       $("#td_"+i+"_"+j).find('img').attr('onClick','updateStatus(\''+obj['id']+'\',\''+obj[j]+'\')'); 
       break; 
      case 'edit': 
       $("#td_"+i+"_"+j).find('a').attr('href','index.php/main/edit/'+obj[j]); 
       break; 
      default: 
       $("#td_"+i+"_"+j).html(obj[j]) 
       break; 
      } 
    } 
}); 

하지만 조금 느립니다. 같은 것을 구현하는 다른 더 좋은 방법이 있습니까?

KrishNik

Answer 1

나는 그것을 아래로 당신을 둔화있어 구문 분석 확실하지 않다. 많은 객체에서 많은 jQuery 선택기를 실행하고있어 시간이 걸릴 수 있습니다.

편집 : 톱 @의 뾰족한의 대답. DOM 속성을 통해 이벤트 위임을 수행하고 있다는 사실조차 알지 못했습니다. Yeeaah, 아마 꽤 천천히 달릴 것입니다. live 이벤트 위임을 사용하는 대신에 아마 더 빨리 실행됩니다 모든 단일 요소에 클릭 이벤트를 할당 사실

. 먼저 click 이벤트를주는 대신 jQuery의 data 함수를 사용하여 해당 객체에 대한 참조를 요소에 제공하십시오.

case 'status': 
    // Note that I switched it to this[j], since I suspect 
    // using this.j was unintentional 
    var val=(this[j])?'active.gif':'deactive.gif'; 
    $('#td_'+i+'_'+j).find('img').attr('src', '<?= base_url() ?>assets/grid/images/'+val). 
     data('status_obj', obj); 

그런 다음 전체 스크립트에서 다음을 한 번만 실행합니다 (분명히 테스트되지 않음).

$('td.status img').live('click', function() { 
    var obj = $(this).data('status_obj'); 
    updateStatus(obj.id, obj.status); 
}); 

이것은 td.status 요소 내부에 img 적, 클릭 그 안에 저장된 status_obj 데이터 updateStatus을 실행하고시의 뜻을 존재 (그래, 나는 당신을 위해 새로운 클래스 이름을 만든)을 의미한다.

일부 작은 최적화 : 자녀를 볼 때

• 는, 예를 들어, 태그 이름을 지정 find('span.priority'), jQuery는 모든 자식 대신 해당 태그 이름의 자식 만 반복 할 수 있기 때문에
• 또는 사실 아이들은 getElementById이 자식을 반복하는 것보다 빠르게 실행되기 때문에 조회 할 고유 한 고유 ID를 제공합니다. .

Answer 2

첫째, JSON은 이 $.parseJSON() 해당 호출에 의해을 분석하고, 그 느린 하지 내기. 나는 무엇을 느린이다하는 데이터 구조를 해석하고 DOM을 업데이트하는 코드입니다 내기.

당신이해야 할 첫 번째 일은이 숨겨 놓은 그 내부 루프에서의 jQuery 조회. 그러면 약간 도움이됩니다 :

for (var j in obj) { 
    var cell = $('#td_' + i + '_' + j); 

이제 jQuery 조회를 반복하는 대신 "셀"을 사용할 수 있습니다. (도움이되지 않을 것입니다 그 많은,하지만 그것은 뭔가입니다.당신이 처리하는 것은 클릭 (또는 개별 셀에 무엇이든)가있는 경우)

을 A (가능성이 큰) 테이블에 이벤트 핸들러를 설정, 당신은 것 많은 jQuery의 .delegate() 기능을 사용하여 더 나을 :

case 'status': 
    $('table').delegate('#td_' + i + '_' + j, 'click', function() { 
     updateStatus(obj['id'], obj[j]); 
    }); 
    break; 

현재 코드는 데이터에서 "상태"메시지를받을 때마다 해당 "onClick"처리기를 다시 첨부합니다.

case 'status': 
    if (!$('table').data(i + '_' + j)) { 
     $('table').delegate('#td_' + i + '_' + j, 'click', function() { 
     updateStatus(obj['id'], obj[j]); 
     }); 
     $('table').data(i + '_' + j, true); 
    } 
    break; 

을 아무리 당신이 꽤 될 수있는 큰 테이블에 세포를 많이 큰 데이터 구조를 반복하고 업데이트를 롤백하는 방법 : 당신이 불필요하게 그것을 다시 등록하지 않는 당신은 확인하기 위해 검사를 추가 할 수 있습니다 천천히, 귀하의 CSS 및 특히 오래된 브라우저 (IE6)에 따라 다릅니다. 당신이 그것을 속도를 위해 할 수있는

Answer 3

한 가지 루프에 대한 귀하의 시작 부분에 자신의 변수에 $("#td_"+i+"_"+j)을 넣어하는 것입니다 : 사방

for(var j in obj){ 
    var tdElem = $("#td_"+i+"_"+j); 

및 사용 tdElem 대신 $("#td_"+i+"_"+j).

Answer 4

루프의 모든 반복마다 각 요소를 찾습니다. 셀을 찾아 결과를 루프 외부의 변수에 넣습니다.

var obj = $.parseJSON(data); 
var parsedData = obj.data; 
var totalRecord = obj.totalCount; 
$.each(parsedData, function(i, item) { 
    for(var j in item) { 
    var element = $("#td_"+i+"_"+j); 
    switch(j) { 
     case 'priority': 
     element.find('.priority').val(item[j]); 
     element.find('.hidden').val(item['id']); 
     break; 
     case 'chkbox': 
     element.find('.chkbox').val(item['id']); 
     break; 
     case 'status': 
     var val=(this.j)?'active.gif':'deactive.gif'; 
     element.find('img') 
      .attr('src','<?= base_url() ?>assets/grid/images/'+val) 
      .attr('onClick','updateStatus(\''+item['id']+'\',\''+item[j]+'\')'); 
     break; 
     case 'edit': 
     element.find('a').attr('href','index.php/main/edit/'+item[j]); 
     break; 
     default: 
     element.html(item[j]) 
     break; 
     } 
    } 
    }); 

일부 변수의 이름을 변경했습니다. 구문 분석 된 데이터를 포함하기 위해 JSON 문자열을 포함하는 변수 data을 다시 사용하는 것과 다른 하나의 항목을 포함하는 구문 분석 결과를 포함하는 변수 obj을 다른 이름으로 재사용하고있었습니다.

코드에서 한 번에 this.j을 사용하고 있습니다. 이는 item[j]과 같지 않지만 item['j']과 같지 않습니다.