Timobo Timobo - 6 months ago 38
Javascript Question

jQuery inside append loop through Json array

I have a simple JSON structure but I can't get the append right to the page. All the names of each teams are in one option tag. They should be in separate option tags.

I have searched and read somewhat similar questions but they are never similar enough that I could understand them.

Once I did manage to get them appended separately but then there were duplicates and I didn't know how to fix the duplication problem.

PS: I presume that my append structure is not the best practice. I am quite new to JavaScript and don't know a better way yet. if you have better solutions they are welcome.

The correct HTML structure should be:

<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

This worked for me based off of @Barmar 's comment:

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");
Comments