將返回的數據附加到基於對象名稱的不同元素

Question

如何根據對象的名稱將json返回的對象附加到不同的元素？我的JSON數據比下面的例子中更大，所以我不知道這是一個好主意在.ajax if語句用於每個對象：

JSON示例數據

[{"name":"Europe","year":"2000"},{"name":"Asia","year":"2001"},{"name":"Africa","year":"2002"}] 

HTML

<div class="Europe"></div> 
<div class="Asia"></div> 
<div class="Africa"></div> 

JS

$.ajax({ 
    url: "text.json",  
    success: function (data) { 
    var item_html; 

     $(data).each(function (index, item) { 
     var name = item.name; 
     item_html='<h3>'+name+'</h3><div>'+item.year+'</div>'; 
     }); 

     if (name == Africa){ 
     $('.Africa').append(item_html); 
     } 
     if (name == Europe){ 
     $('.Europe').append(item_html); 
     } 
     if (name == Asia){ 
     $('.Asia').append(item_html); 
     } 

    }, 
    error: function() {$('.Europe').append("<b>No Results Returned</b>");}   
}); 

Answer 1

將您的if塊移動到each

$(data).each(function (index, item) { 
    var name = item.name; 
    item_html = '<h3>' + name + '</h3><div>' + item.year + '</div>'; 
    if(name == 'Africa') { 
     $('.Africa').append(item_html); 
    } 
    if(name == 'Europe') { 
     $('.Europe').append(item_html); 
    } 
    if(name == 'Asia') { 
     $('.Asia').append(item_html); 
    } 
}); 

Answer 2

我覺得既然名字和類名是相同的，你可以用它來找到.each()環內的目標元素，並將其內容，如

$.ajax({ 
    url: "text.json", 
    success: function (data) { 
     var item_html; 

     $(data).each(function (index, item) { 
      var name = item.name; 
      $('.' + name).html('<h3>' + name + '</h3><div>' + item.year + '</div>') 
     }); 
    }, 
    error: function() { 
     $('.Europe').append("<b>No Results Returned</b>"); 
    } 
});