Search form multiple fields javascript

Question

Let's say there is an array of objects like,

[
    {
        "fname": "Anne",
        "lname": "Walker",
        "email": "[email protected]",
    },
    {
        "fname": "Peterson",
        "lname": "Dalton",
        "email": "[email protected]",
    },
    {
        "fname": "Velazquez",
        "lname": "Calderon",
        "email": "[email protected]",
    },
    {
        "fname": "Norman",
        "lname": "Reed",
        "email": "[email protected]",
    }
]

I want to create a search filter which searches by the only fname and lname. There was a question like this before asked but it search through all the fields

how to create React search filter for search multiple object key values

Can anyone help me on this ?

good job for looking for existing solution. That said, in the link you provided, the filtering occurs on a given field provided by user (see this.setState). Either fname or lname or email. Is this fine for you or you want to apply several filter at the same time? — grodzi
– grodzi, Commented Nov 14, 2019 at 7:34

arm · Accepted Answer · 2019-11-14 07:37:11Z

4

Is this ok?

const json = [
    {
        "fname": "Anne",
        "lname": "Walker",
        "email": "[email protected]",
    },
    {
        "fname": "Peterson",
        "lname": "Dalton",
        "email": "[email protected]",
    },
    {
        "fname": "Velazquez",
        "lname": "Calderon",
        "email": "[email protected]",
    },
    {
        "fname": "Norman",
        "lname": "Reed",
        "email": "[email protected]",
    }
];
function search(str) {
    const keyword = str.toLowerCase();
    return json.filter(x => x.fname.toLowerCase().includes(keyword) || x.lname.toLowerCase().includes(keyword));
}

answered Nov 14, 2019 at 7:37

arm

3661 gold badge7 silver badges21 bronze badges

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

2 Comments

Inamul Hassan Over a year ago

Thank you. that was really helpful

arm Over a year ago

You're welcome. BTW, If you want to search for a keyword that matches either the lname or fname, use the code above. But if you need to write a function that searches the objects based on both fname AND lname, you must use @corrado4eyes 's answer. Also notice that I use .toLowerCase() to search case-insensitive. If you need your search to be Case-Sensitive remove the usage of .toLowerCase() Happy coding.

cradapyx · Accepted Answer · 2019-11-14 07:39:21Z

1

You should propose an example you tried and say "Hey guys I tried this on these data, but it did not work.". However is an array of object, so what you could do is:

const magicFunction = (name, lastName, array) => {
    return array.filter((el) => el.fname === name && el.lname === lastName);
}

answered Nov 14, 2019 at 7:39

cradapyx

2932 silver badges13 bronze badges

Comments

Rahul Patil · Accepted Answer · 2019-11-14 07:40:09Z

1

You can use lodash library. Use find or filter functions. Find - for single result and Filter for multiple results Example-

let _ = require('lodash');
let data = [
    {
        "fname": "Anne",
        "lname": "Walker",
        "email": "[email protected]",
    },
    {
        "fname": "Peterson",
        "lname": "Dalton",
        "email": "[email protected]",
    },
    {
        "fname": "Velazquez",
        "lname": "Calderon",
        "email": "[email protected]",
    },
    {
        "fname": "Norman",
        "lname": "Reed",
        "email": "[email protected]",
    }
]
let result = _.find(data, { fname: 'Norman', lname: 'Reed'})

Another alternative without library

let res = data.find(o => o.fname == "Norman" && o.lname == "Reed")
console.log(res)

edited Nov 14, 2019 at 7:40

answered Nov 14, 2019 at 7:34

Rahul Patil

4831 gold badge5 silver badges16 bronze badges

2 Comments

arizafar Over a year ago

No need to include a library for a basic requirement. Can be achieved using Array.prototype.find

Inamul Hassan Over a year ago

Thanks people, For your time

Collectives™ on Stack Overflow

Search form multiple fields javascript

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related