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

在each

中移动您的if块

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

根据对象名称将返回的数据附加到不同的元素

2 个答案: