如何按json文件中的数据id对结果列表进行排序?

时间:2017-11-16 17:12:17

标签: javascript jquery json radio-button

因此,我的命名工具中的所有内容都可以显示json文件中的名称。我无法工作的是,当数据ID与单选按钮的选项绑定并选择下拉过滤并仅显示具有与之关联的数据ID的名称时。这是我的代码:

单选按钮的HTML:

<form class="dnt-tool" id="dnt" name="dnt">
    <div class="dnt-overlay">
        <input id="male" name="gender" type="radio" value="Male" />
        <label for="male">Male</label> 
        <input data-id="594" id="female" name="gender" type="radio" value="Female" />
        <label for="female">Female</label> 
        <input checked="checked" data-id="0" id="all" name="gender" type="radio" value="All" />
        <label for="all">All</label> 
        <select>
            <option data-id="0" value="/dog-name-finder/">Select a Category</option>
            <option data-id="0" value="/dog-name-finder/">All</option>
            <option data-id="601" value="/dog-name-finder/baby/">Baby</option>
            <option data-id="602" value="/dog-name-finder/celebrity/">Celebrity</option>
            <option data-id="603" value="/dog-name-finder/cute/">Cute</option>
            <option data-id="598" value="/dog-name-finder/disney/">Disney</option>
            <option data-id="600" value="/dog-name-finder/fancy/">Fancy</option>
            <option data-id="605" value="/dog-name-finder/most-popular/">Most Popular</option>
            <option data-id="599" value="/dog-name-finder/presidential/">Presidential</option>
            <option data-id="597" value="/dog-name-finder/techy/">Techy</option>
            <option data-id="596" value="/dog-name-finder/television/">Television</option>
            <option data-id="606" value="/dog-name-finder/trendy/">Trendy</option>
            <option data-id="595" value="/dog-name-finder/unisex/">Unisex</option>
            <option data-id="604" value="/dog-name-finder/video-game/">Video Game</option> 
        </select>
    </div><!-- end of dnt-overlay -->
    <div class="dnt-btn">
        <button id="submit" type="submit">Show Names</button>
    </div><!-- end of dnt btn -->
</form><!-- end of dnt-tool -->

这是在弹出窗口中显示结果的jquery(弹出窗口工作正常):

<script>
    $(document).ready(function() {
        $('#dnt').submit(function(e){
            var cat_id = $('.dnt-overlay > select > option:selected').data('id') || 0;
            var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All';
            if (cat_id === 0)
            {
                cat_title = 'All';
            }
            var dnt_url = $('.dnt-overlay > select > option:selected').val() || '/dog-name-finder/';
            var gender = $('.dnt-overlay > [name=gender]:checked').data('id') || 0;
            var gender_title = $('.dnt-overlay > [name=gender]:checked').val() || 'All';
            var title = cat_title;
            var html = '';

            var params = '';

            if(window.innerWidth <= 320)
            {
                params = '?limit=18';
            }
            else
            {
                params = '?limit=21';
            }


            if (cat_id > 0)
            {
                params += '&' + 'cat_id=' + cat_id;
            }

            if (gender > 0 && cat_title != 'Gender Agnostic' && cat_title != 'Unisex' && cat_title != 'Male' && cat_title != 'Female')
            {
                title += ' ' + gender_title;
                params += '&' + 'gender=' + gender;
                if(cat_title == 'All')
                {
                    dnt_url += gender_title.toLowerCase() + '/';
                }
                else
                {
                    dnt_url += '?gender=' + gender_title.charAt(0).toLowerCase();
                }
            }
            title += ' Dog Names';

            $('#dnt-popup > h1').text(title);       

            e.preventDefault(); // We don't need to send the form, because it's all local
            if($('#male').is(':checked')) { // Check if male is checked
                $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-female').addClass('dnt-male');
            } 
            else if($('#female').is(':checked')) { // Check if female is checked 
                $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-male').addClass('dnt-female');
            } 
            else if($('#all').is(':checked')) { // Check if all is checked
                $('#dnt-popup').removeClass('dnt-female').removeClass('dnt-male').addClass('dnt-all');
            }
            $.ajax({
               type : 'GET',
               dataType: "json",
              url: "dnt.json" + params,
            })

            .done(function( data ) {

                $.each(data, function( index, value ) {
                    if(index == 21){
                        return false;
                    }

                    html +='<li>' + value.Name + '</li>';
                });

                $('#dnt-popup > .results-list > ul').html(html);

                $.magnificPopup.open({ // open pop up for male
                    items: {
                        src: '#dnt-popup',
                        type: 'inline'

                    },//item
                        mainClass: 'animated slideInRight'
                });///popup open
            }); 
         });///submit function
       });///submit function 
    </script>

这是我的json文件中的一些数据:

       [
          {
             "Name":"Aaliyah",
             "Female":594,
             "Baby":601
           },
           {
              "Name":"Abby",
              "Female":594
            },
            {
               "Name":"Abe",
               "Male":593,
               "Video Games":604
            },
            {
               "Name":"Abigail",
               "Female":594,
               "Baby":601
            },
            {
               "Name":"Abu",
               "Male":593,
               "Disney":598
            },
            {
               "Name":"Ace",
               "Male":593,
               "Fancy":600,
               "Cool":611
             }
         ]

这里有什么我想念的吗?请帮忙。

0 个答案:

没有答案