jQuery通过Json数组在append循环中

jQuery inside append loop through Json array

本文关键字：append 循环数组通过 Json jQuery 更新时间：2023-09-26

我有一个简单的JSON结构，但我无法获得页面的追加权限。每个团队的所有名称都在一个选项标签中。它们应该在单独的选项标签中。

我搜索并阅读了一些相似的问题，但它们从来都不够相似，以至于我能理解它们。

有一次我设法将它们单独附加，但后来出现了重复，我不知道如何解决重复问题。

附言：我认为我的附加结构不是最佳实践。我是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");

根据@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");