如何在jquery 'each' 循环中对 json 值进行分组和排序

Question

我正在尝试从下面的JSON中为美国代表和参议员提取下拉菜单...理想地由" Sen"one_answers" Rep"分组，然后按字母表进行。到目前为止，下面的代码正在努力使所有成员进入下拉列表，但未将其分组或字母表。会喜欢任何想法，谢谢！

<script>

$.ajax({
url:'https://theunitedstates.io/congress-legislators/legislators- 
current.json',
dataType: 'json',
type:'get',
cache:false,
success:function(data) {
$(data).each(function(index, value) {
     $("#members").append("<option>" + value.terms[value.terms.length- 
1].type + " " + value.name.first + " " + value.name.last + "</option>");
    });
}
});

</script>
<form>
    <select id="members" style="text-transform:uppercase;">
        <option selected="selected">Select...</option>
    </select>
</form>

Answer 1

HTML <optgroup>元素在<select>元素中创建选项分组。

(https://developer.mozilla.org/en-us/docs/web/html/element/optgroup(

    <select id="members" style="text-transform:uppercase;">
        <optgroup id="senators" label="Senators"></optgroup>
        <optgroup id="reps" label="US Reps"></optgroup>
    </select>

sort()方法对阵列的元素进行对位并返回数组的元素。

(https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/array/sort(

---

所以，如果您想按姓氏进行排序，可以尝试以下方法：

    var reps = [];
    var senators = [];
    $.ajax({
        url: 'https://theunitedstates.io/congress-legislators/legislators-current.json',
        dataType: 'json',
        type: 'get',
        cache: false,
        success: function (data) {
            $(data).each(function (index, value) {
                if (value.terms[value.terms.length - 1].type == 'sen') {
                    // add to senators
                    senators.push(value.name.last + ', ' + value.name.first);
                } else {
                    // add to reps
                    reps.push(value.name.last + ', ' + value.name.first)
                }
            });
            senators.sort();
            reps.sort();
            senators.forEach(function (val) {
                $("#senators").append("<option>" + "SEN. " + " " + val + "</option>");
            });
            reps.forEach(function (val) {
                $("#reps").append("<option>" + "REP. " + val  + "</option>");
            })
        }
    });

---

JSFIDDLE：(https://jsfiddle.net/eb1ayera/(