配列から特定の情報を表示する

今回は特定の配列から対象のみの情報を取り出す方法です。
配列の内から特定の情報をだけを絞り込みたい事は良くあります。
今回は情報の絞り込みが出来れば良いなと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   

        <script type="text/javascript"><!--

            // Data Set
            var datMember = [
                {
                    name : 'A',
                    sex  : 'male',
                    age  : 18
                },
                {
                    name : 'B',
                    sex  : 'female',
                    age  : 20},
                {
                    name : 'C',
                    sex  : 'male',
                    age  : 22},
                {
                    name : 'D',
                    sex  : 'female',
                    age  : 25
                },
                {
                    name : 'E',
                    sex  : 'male',
                    age  : 30
                }
            ];


            var target;
            $(function(){

                // Glep Data Age
                var arrAge;
                $('#judgment_age').click( function(){

                    target = $('#select_age').val();

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.age >= target);
                        }
                    );                    
                    setDispData('grep_true', arrAge);

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.age >= target);
                        },
                        true
                    );                    
                    setDispData('grep_false', arrAge);

                });


                // Glep Data Sex
                var arrSex;
                $('#judgment_sex').click( function(){

                    target = $('#select_sex').val();

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.sex == target);
                        }
                    );                    
                    setDispData('grep_true', arrAge);

                    arrAge = $.grep(
                        datMember,
                        function(obj, index) {
                            return (obj.sex == target);
                        },
                        true
                    );                    
                    setDispData('grep_false', arrAge);

                });

                // Daat Set
                function setDispData(setObj, setData) {
                    $('#' + setObj).empty();
                    $.each(setData, function(index) {
                        $('#' + setObj)
                            .append('<div id="name_' + setData[index]['name'] + '"></div>')
                            .children('#name_' + setData[index]['name'])
                            .append('<h2>' + setData[index]['name'] + '</h2>')
                            .append('<dl></dl>')
                            .children('dl')
                            .append('<dt>name</dt><dd>' + setData[index]['name'] + '</dd>')
                            .append('<dt>Age</dt><dd>'  + setData[index]['age']  + '</dd>')
                            .append('<dt>Sex</dt><dd>'  + setData[index]['sex']  + '</dd>');
                    });
                }
                // init Data
                setDispData('all_data', datMember);

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin       : 10px;
            }

            div.target_div {
                width        : 25px;
                height       : 25px;
                line-height  : 25px;
                text-align   : center;
                border       : solid 1px #000000;
                float        : left;
            }

            dl {
                width        : 300px;
            }
            dt {
                float        : left;
            }
            dd {
                margin-left  : 80px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="select_area">

                <select id="select_age">
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                    <option value="30">30</option>
                    <option value="35">35</option>
                </select>
                <button id="judgment_age">Age Judgment</button>

                <select id="select_sex">
                    <option value="male">male</option>
                    <option value="female">female</option>
                </select>
                <button id="judgment_sex">Sex Judgment</button>

            </div>

            <div id="disp_area">

                <h1>Grep True</h1>
                <div id="grep_true"></div>

                <h1>Grep False</h1>
                <div id="grep_false"></div>

                <h1>All Data</h1>
                <div id="all_data"></div>

            </div>

        </div>
    </body>
</html>

sample

sample には二組の select と button が設置してあります。
age を選択して button を押すと指定した年齢以上の情報を絞り込みます。
sex を選択して button を押すと指定した性別の情報を絞り込みます。

実際に絞り込みが出来ることが出来ました。
ちょっと意外だったことは grep の第3引数です。
true を指定することで絞り込みを行った結果、対象外となった情報のみ
対象に出来るということです。
「その他」だけを表示したいことは多々ありますが中々便利ですよねぇ・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です