时间戳

首页 > 解决方案 > 如何在 jquery 'each' 循环中对 json 值进行分组和排序

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

问题描述

我正在尝试将美国代表和参议员的数据从下面的 json 中提取到下拉菜单中……最好按“Sen”和“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>

标签： jqueryjsonajax

解决方案

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/）

推荐阅读