Filtering json array with jQuery

Question

I have a JSON array that holds values for the amount of properties in a postal area. It allows the user to enter a post code inside an input I then filter the JSON using this value. My issue is that it will only work if I have an exact match.

For example if I enter "AB10 1" It will match and console log 1147 which is the amount of properties in that area. But if I search for "AB10" I get nothing as it isn't an exact match. What I would like to happen is to console log the amount of properties for any sector that contains "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>

Milind Anantwar · Accepted Answer · 2019-06-13 10:49:17Z

1

You are filtering the json element based on exact match. You can rather use .indexOf() method for partial matching of data. I would also suggest trimming the input parameter for any leading/trailing white spaces:

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

answered Jun 13, 2019 at 10:49

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reece Over a year ago

Works perfectly thanks. And yeah I was gonna trim it just didn't know how to do that yet so thanks again

Milind Anantwar Over a year ago

@Reece : Glad it helps :)

Collectives™ on Stack Overflow

Filtering json array with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related