JQuery JSON AJAX вызов извлечения больше, чем ожидалось

Question

Я зову этот JSON файл:

{ 
    "data" : [ 
     { 
      "type" : "file", 
      "target" : "TheGreatest.doc", 
      "workspace" : "Huddle Workspace One", 
      "user" : "Chan Marshall" 
     }, 
     { 
      "type" : "comment", 
      "target" : "martes.mp3", 
      "workspace" : "Huddle Workspace One", 
      "user" : "Fernando Corona" 
     }, 
     { 
      "type" : "file", 
      "target" : "Papalon.pdf", 
      "workspace" : "Huddle Workspace Two", 
      "user" : "Tom Jenkinson" 
     }, 
     { 
      "type" : "whiteboard", 
      "target" : "My Manic & I", 
      "workspace" : "Huddle Workspace One", 
      "user" : "Laura Marling" 
     } 
    ], 
    "error" : false, 
    "code" : 200 
} 

С JQuery AJAX на щелчке ссылки:

$('#content > .section > h2 > a').live('click',function() { 

    $('#content > .section > ul').toggle(); 

    /* 
     JSON 
    */ 

    var $jsonURL = 'response.json'; 

    $.ajax({ 
     type: 'GET', 
     url: $jsonURL, 
     dataType: "json", 
     success: function(data){ 

      var $html = ''; 

      $.each(data.data, function(i, data){ 

       if (data.type == 'file') { 
        var $string = 'workspace'; 
       } else if (data.type == 'comment') { 
        var $string = 'file'; 
       } else { 
        var $string = 'workspace'; 
       } 

       $html += '<li class="' + data.type + '">'; 

       $html += '<strong>New ' + data.type + '</strong> was added to the ' + $string + ' '; 

       $html += '<a href="' + data.target + '">' + data.target + '</a> '; 

       $html += '<a href="' + data.workspace + '">' + data.workspace + '</a>'; 

       $html += ' by <a href="#">' + data.user + '</a>'; 

       $html += '</li>'; 

       $('#content > .section > ul').append($html);  

      }); 

     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
      alert(xhr.status); 
      alert(thrownError); 
     }   
    }); 

    return false; 
}); 

В то время как я ожидал, чтобы добавить 4 новый список элементы, которые он возвращает 10.

Любые идеи относительно того, где я иду не так?

Answer 1

Объем вашей переменной $ HTML должна управляться так, чтобы он «установлен первый элемент» с + а не += на первое действие внутри цикла .each, - как вы его добавления в цикле это то «Сбрасывает» его для каждого элемента, вам нужно установить его для начала первого элемента внутри этого цикла.

Я также заметил, что это:

 if (data.type == 'file') { 
      var $string = 'workspace'; 
     } else if (data.type == 'comment') { 
      var $string = 'file'; 
     } else { 
      var $string = 'workspace'; 
     } 

может быть более просто:

 if (data.type == 'comment') { 
      var $string = 'file'; 
     } else { 
      var $string = 'workspace'; 
     }; 

Answer 2

Заменить это:

$html += '<li class="' + data.type + '">'; 

... с этим:

$html = '<li class="' + data.type + '">'; 

Answer 3

Да, это потому, что вы определяете $html за пределами вашего $.each цикла, но продолжает добавлять к нему в пределах петля. Попытайтесь определить $html в начале вашей функции $.each.