JSONからデータを取得して配列にフィルターをかける

WEBアプリ開発でJSONデータを扱うことになったのでメモ。
実際に作り始めると色々な機能追加がありそうなので、対応出来るような書き方を目指してみた。

JavaScript

(function(window,namespace,$){

    function _Item(dataFilter,i,$_list){
        this.member_id = dataFilter[i].member_id;
        this.member_category = dataFilter[i].member_category;
        this.member_name = dataFilter[i].member_name;
        this.item_id = dataFilter[i].item_id;
        this.item_name = dataFilter[i].item_name;
        this.item_src = dataFilter[i].item_src;
        this.addList($_list);
    }

    _Item.prototype.addList = function($_list){
        $_list.append(
            '<li>'
            + '<span>' + this.member_id + '</span>'
            + '<span>' + this.member_name + '</span>'
            + '<span>' + this.member_category + '</span>'
            + '<span>' + this.item_id + '</span>'
            + '<span>' + this.item_name + '</span>'
            + '<span>' + this.item_src + '</span>'
            + '</li>'
        );
    }

    window[namespace] = {

        init: function(json){
            var data = json;
            this.getDataAll(data);
            this.change(data);
        },

        change: function(data){
            var that = this;

            $('input:text').on('change',function(){
                var value = $(this).val();
                _case(data,'member_name',value);
            })

            $('select').on('change',function(){
                var value = $(this).val();
                _case(data,'member_category',value);
            })

            function _case(data,subject,value){
                if(value == 'all'){
                    that.getDataAll(data);
                }else{
                    that.getDataFilter(data,value,subject);
                }
            }
        },

        getDataAll: function(data){
            var dataFilter = data;
            this.display(dataFilter);
        },

        getDataFilter: function(data,value,subject){
            var dataAll = data;
            var dataFilter = [];
            var str = new RegExp(value,'i');
            dataFilter = dataAll.filter(function(item,index){
                if(item[subject].match(str)){
                    return true;
                };
            });
            this.display(dataFilter);
        },

        display: function(dataFilter){
            var len = dataFilter.length;
            var $_list = $('#list');
            $_list.empty();
            for (var i = 0; i < len; i++) {
                new _Item(dataFilter,i,$_list);
            };
        }
    }

})(this,'DataBind',jQuery);

JSONを読込む

$(function(){
    $.ajax({
        url: '/inc/data/data.json',
        type: 'GET',
        cache: false,
        dataType: 'json',
        success: function(json){
            DataBind.init(json);
        }
    });
});

実行するとこんな感じ

※HTMLその他のソースは上記参照