用jQuery过滤json数组

时间:2019-06-13 10:46:39

标签: jquery json

我有一个JSON数组,其中保存邮政区域中的属性数量值。它允许用户在输入中输入邮政编码,然后使用此值过滤JSON。我的问题是,只有当我完全匹配时,它才起作用。

例如,如果我输入“ AB10 1”,它将与控制台日志1147匹配,这就是该区域中的属性数量。但是,如果我搜索“ AB10”,则不会得到任何结果,因为它并不完全匹配。我想做的是控制台记录包含“ AB10”的任何扇区的属性数量。

JS

jQuery(document).ready(function($){
    $('#form').on('submit', function(e){
        e.preventDefault();
        var input = $(this).find('#area').val();

        var data_filter = area_json.filter( element => element.Sector == input );
        console.log( data_filter );
        var num; 

        for( var i = 0; i < data_filter.length; i++ ){
            console.log( area_json[i].Residential );    
        }  
    });

    var area_json = [
        {
           "Sector": "AB10 1",
           "Locality": "Thistle Court,Aberdeen",
           "Residential": 1147
        },
        {
           "Sector": "AB10 6",
           "Locality": "Great Western Road,Aberdeen",
           "Residential": 4596
        },
        {
           "Sector": "AB10 7",
           "Locality": "Holburn Street,Aberdeen",
           "Residential": 4380
        }
    ]
});

HTML

<form id="form" action="" method="post">
    <p>The postcodes I want to target are <input type="text" id="area"></p>
    <input type="submit" value="submit">
</form>

1 个答案:

答案 0 :(得分:1)

您正在基于完全匹​​配过滤json元素。您可以使用.indexOf()方法来部分匹配数据。我还建议修剪任何前导/后缀空格的输入参数:

var data_filter = area_json.filter( element => element.Sector.indexOf(input.trim()) > -1 );