jQuery內部通過Json數組追加循環

Question

我有一個簡單的JSON結構，但我無法獲得頁面右側的追加。每個團隊的所有名字都在一個選項標籤中。他們應該在不同的選項標籤。

我已經搜索和閱讀了一些類似的問題，但他們從來沒有足夠類似的，我可以理解他們。

一旦我確實設法分開追加它們，但之後出現重複，我不知道如何解決重複問題。 PS：我認爲我的追加結構並不是最佳實踐。我對JavaScript很陌生，現在還不知道更好的方法。如果你有更好的解決方案，歡迎。

正確的HTML結構應該是：

<fieldset class="team-wrap"> 
    <label for="Team A"><img src='images/player1.png' alt="Team A"> 
     <select name="Team A" id="Team A" multiple class="team dropdown selectpicker show-menu-arrow show-tick form-control" title="Players" data-width="70%" data-size="auto" multiple data-selected-text-format="count"> 
      <optgroup label="Select a Player(s)"> 
       <option value="Merv Jake">Merv Jake</option> 
       <option value="Derek Dax">Derek Dax</option> 
       <option value="Trace Harper">Trace Harper</option> 
      </optgroup> 
     </select> 
    </label> 
</fieldset> 

JSON：

{ 
    "men": [{ 
     "Team A": { 
      "img": "images/player1.png", 
      "names": ["Merv Jake", "Derek Dax", "Trace Harper"], 
      "group": "A" 
     }, 
     "Team B": { 
      "img": "images/player2.png", 
      "names": ["Shannon Xavier", "Alec Xavier", "Simon Leslie"], 
      "group": "B" 
     } 
    }] 
} 

的jQuery：

function teams(gender){ 
    var teams = $(".teams").find(".group"); 
    $.getJSON('inc/miehet.json', function(data) { 
     $.each(data[gender], function(key, value) { 
      $.each(value, function(key) { 
       //console.log(key + " = " + this.img + " , " + this.names + " , " + this.group); 
       teams.append(
        '<fieldset class="team-wrap">'+ 
         '<label for='+key+'><img src='+this.img+' alt='+key+'>' + 
          '<select name='+key+' id='+key+' multiple class="team dropdown selectpicker show-menu-arrow show-tick form-control" title="Players" data-width="70%" data-size="auto" multiple data-selected-text-format="count">' + 
           '<optgroup label="Select a Player(s)">' + 
            '<option value="'+this.names+'">'+this.names+'</option>' + 
           '</optgroup>' + 
          '</select>' + 
         '</label>' + 
        '</fieldset>' 
       ); 
      }); 
     }); 
    }); 
} 
teams("men"); 

Answer 1

這個工作我基於關閉@Barmar的評論：

http://codepen.io/stufu/pen/QNYdXV

function teams(gender){ 
    var teams = $(".teams").find(".group"); 
    $.getJSON('https://demo8858242.mockable.io/test', function(data) { 
     $.each(data[gender], function(key, value) { 
      $.each(value, function(key) { 
       teams.append(
        '<fieldset class="team-wrap">'+ 
         '<label for='+key+'><img src='+this.img+' alt='+key+'>' + 
          '<select name='+key+' id='+key+' multiple class="team dropdown selectpicker show-menu-arrow show-tick form-control" title="Players" data-width="70%" data-size="auto" multiple data-selected-text-format="count">' + 
           '<optgroup class="' + this.group + '" label="Select a Player(s)">' + '</optgroup>' + 
          '</select>' + 
         '</label>' + 
        '</fieldset>' 
       ); 
       var group = $('.' + this.group); 
       $.each(this.names, function(key, name) { 
        group.append('<option value="'+name+'">'+name+'</option>'); 
       }); 
      }); 
     }); 
    }); 
} 
teams("men");