正确地迭代JSON返回

Iterating a JSON return properly

本文关键字：返回 JSON 迭代 正确地      更新时间：2023-09-26

我的脚本出现了一个奇怪的问题。我得到了一个JSON结果集，想迭代它，然后在div中显示。我检查了fiddler，我可以看到整个结果集被返回，就像下面的集合一样

[{"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();
    });        
};

通过调用empty():，在循环的每次迭代中都会擦除div的内容

$.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();

在您的.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);
    }
  });        
};
相关文章：