正確地迭代JSON返回

Question

我的腳本有一個奇怪的問題。我得到一個JSON結果集並想迭代它，然後顯示在一個div中。我檢查小提琴手，我可以看到返回的整個集合類的集合之下

[{"EPubID":71,"SerialID":1,"PartnerID":343,"Partner":"Aberdeen, City of ","PublicationTitle":"Uploading multiple files test","AuthFirstName":null,"AuthMiddleName":null,"AuthLastName":null,"AuthFullName":null,"PublicationYear":2011,"SubmitterEmail":null,"VolumeNumber":null,"Issue":null,"AlreadyInCatalog":false,"InCatalog":"No","Status":"D","Notes":"testing multiple file uploads","IsMonograph":false,"Monographed":"No","SubmittedDate":"\/Date(1317913458810)\/","SubmittedBy":"admin","ApprovedDate":"\/Date(1317914842263)\/","ApprovedBy":"admin","SubmittingPartnerID":0,"OriginalRefId":"343-71","SerialName":"None","URL":null,"InfoRecordID":0,"LastModified":"\/Date(-62135568000000)\/","IsSerial":false,"Approved":false,"Delete":false,"Pending":false,"files":null},{"EPubID":72,"SerialID":19,"PartnerID":26,"Partner":"Digital Archives","PublicationTitle":"testing multiple file uploads ","AuthFirstName":null,"AuthMiddleName":null,"AuthLastName":null,"AuthFullName":null,"PublicationYear":2001,"SubmitterEmail":null,"VolumeNumber":"1","Issue":"1","AlreadyInCatalog":false,"InCatalog":"No","Status":"A","Notes":"this should work","IsMonograph":false,"Monographed":"No","SubmittedDate":"\/Date(1317915134767)\/","SubmittedBy":"admin","ApprovedDate":"\/Date(1317915430627)\/","ApprovedBy":"admin","SubmittingPartnerID":0,"OriginalRefId":"26-72","SerialName":"Fake Test Serial","URL":null,"InfoRecordID":0,"LastModified":"\/Date(-62135568000000)\/","IsSerial":false,"Approved":false,"Delete":false,"Pending":false,"files":null}] 

問題是我的腳本只顯示第一個項目回來，沒有別的。這是我的腳本。

function SearchExistingEpubs() { 
    var title = $("input#PublicationTitle").val(); 

    $('#Results').hide(); 
    $("div#SearchResults").innerHTML = ''; 
    $.getJSON('/EPub/SearchExistingEpubs/' + title, null, function (data) { 
     var items = []; 
     var found = false; 
     $.each(data, function (key, val) { 
      found = true; 
      $("div#SearchResults").empty(); 
      $("div#SearchResults").append("Title: " + val.PublicationTitle + " Owning Partner: " + val.Partner + " Year: " + val.PublicationYear) ; 
      $('#Results').show(); 
     }); 
     if (!found) { 
      $("div#SearchResults").empty(); 
      //$("div#SearchResults").html(''); 
      $("div#SearchResults").append("No documents found"); 
      $('#Results').show(); 
      //$('#Results').slideUp(10000); 
      $('#Results').animate({height:'toggle'},10000); 
      //$('#Results').fadeOut(10000); 
     } 
     //$('#Results').show(); 
    });   
}; 

Answer 1

你消滅在您的通話每次循環的div內容empty()：

$.each(data, function (key, val) { 
    found = true; 
    $("div#SearchResults").empty(); // <------ REMOVE this line 
    $("div#SearchResults").append("Title: " + val.PublicationTitle + " Owning Partner: " + val.Partner + " Year: " + val.PublicationYear) ; 
    $('#Results').show(); 
}); 

但在做DOM更新循環通常不是一個好主意。爲什麼不建立你的字符串，並做一個 DOM更新：

var content = ''; 
$.each(data, function (key, val) { 
    found = true; 
    content += "Title: " + val.PublicationTitle + " Owning Partner: " + val.Partner + " Year: " + val.PublicationYear; 
}); 
$("div#SearchResults").append(content); 
$('#Results').show(); 

Answer 2

在你.each循環你打電話$("div#SearchResults").empty();這將清除先前附加到這個div的任何內容。

嘗試以下操作：

function SearchExistingEpubs() { 
    var title = $("input#PublicationTitle").val(); 
    $('#Results').hide(); 
    $("div#SearchResults").empty(); 
    $.getJSON('/EPub/SearchExistingEpubs/' + title, null, function (data) { 
    $("div#SearchResults").empty(); 
    var items = []; 
    if (data.length) { 
     $.each(data, function (key, val) { 
     $("div#SearchResults").append("Title: " + val.PublicationTitle + " Owning Partner: " + val.Partner + " Year: " + val.PublicationYear); 
     }); 
     $('#Results').show(); 
    } else { 
     $("div#SearchResults").append("No documents found"); 
     $('#Results').show(); 
     $('#Results').animate({height:'toggle'},10000); 
    } 
    });   
};