Searching Nested Data In Angular

Question

I'm trying to search for the fname, mname and lname together. Right now, i can only search by fname, mname and lname but not together.

Example: I'm trying to search for "Jacob jj9eqwif Nguyen" but it doesnt work. But try to search for Jacob and it works. Try to search for jj9eqif and it works. Try to search for Nguyen and it works.

Pls see this link

CLICK HERE

     search(event) {
        const val = event.target.value.toLowerCase();

        if (!val) {
          this.data = this.tempData;
        }

        const temp = this.tempData.filter(row => {
          return Object.keys(row).some(property => {
            if (property === 'received_by') {
              return row[property].fname
                .toString()
                .toLowerCase()
                .indexOf(val) !== -1
                ? row[property].fname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                : row[property].mname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                ? row[property].mname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                : row[property].lname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                ? row[property].lname
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1
                : (row[property].fname + row[property].lname + row[property].mname)
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1;
            }
            if (property === 'warehouse') {
              return (
                row[property].name
                  .toString()
                  .toLowerCase()
                  .indexOf(val) !== -1
              );
            } else {
              return row[property] === null
                ? null
                : row[property]
                    .toString()
                    .toLowerCase()
                    .indexOf(val) !== -1;
            }
          });
        });

        this.data = temp;
      }

can you elaborate search for the fname, mname and lname together with some example search text? — jitender
– jitender, Commented Oct 1, 2019 at 4:24

Sangram Nandkhile · Accepted Answer · 2019-10-01 05:31:53Z

1

There is typo in your code you are searching for fname,mname,lname but you connect your string fname+lname+mname but lname should be on last position so change

(row[property].fname + row[property].lname + row[property].mname)
                .toString()
                .toLowerCase()
                .indexOf(val) !== -1;

to

(row[property].fname + row[property].mname + row[property].lname)
                .toString()
                .toLowerCase()
                .indexOf(val) !== -1;

Also if you want to search condition could be more simpler if you don't use trinory oprator here exmp

row[property].fname.toString()
            .toLowerCase().includes(val)
           || row[property].mname.toString()
                .toLowerCase().includes(val)|| row[property].lname
                .toString().toLowerCase().includes(val) || (row[property].fname + row[property].mname + row[property].lname)
                .toString()
                .toLowerCase()
                .includes(val);

As @Sangram Nandkhile pointed out Consider the space between fname, mname and lname.Your condition should be

(row[property].fname +' '+ row[property].mname +' ' row[property].lname)

Demo

edited Oct 1, 2019 at 5:31

Sangram Nandkhile

18.2k19 gold badges85 silver badges116 bronze badges

answered Oct 1, 2019 at 5:15

jitender

10.4k1 gold badge21 silver badges49 bronze badges

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

4 Comments

Sangram Nandkhile Over a year ago

Consider the space between fname, mname and lname. If you search Jacob jj9eqwif Nguyen, it will not return anything. Better to use (row[property].fname +' '+ row[property].mname +' ' row[property].lname)

Hemendra Over a year ago

@SangramNandkhile There's no need to do a searching in fname/mname/lname individually. If you're combining the string and then searching in that string, that condition alone will work for individual cases too.

Joseph Over a year ago

@jitender. One more thing, if you just type "jj9eqwif Nguyen", it should also appear

jitender Over a year ago

@Joseph add one more or condition demo stackblitz.com/edit/filter-multiple-efvzhw

Nimer Awad · Accepted Answer · 2019-10-01 09:33:00Z

1

Let's start with your code,

You used Object.key(row) inside filter function then you only check for 2 fixed properties; recieved_by and warehouse, so you get object keys and loop through them which consumes unnecessary process.

Also, you used multiple ternary operator; which will be confusing, but all you need to use || (or) operator.

That's my solution:

const temp = this.tempData.filter(row => {
  return (
    row.warehouse.name.toLowerCase().indexOf(val) !== -1 ||
    (
      row.received_by.fname + ' ' +
      row.received_by.mname + ' ' +
      row.received_by.lname
    ).toLowerCase().indexOf(val) !== -1
  );
});

But it inside search function, it should work properly.

Check that in DEMO.

edited Oct 1, 2019 at 9:33

answered Oct 1, 2019 at 5:06

Nimer Awad

4,2193 gold badges19 silver badges35 bronze badges

7 Comments

Hemendra Over a year ago

Keep in mind that "includes" on string doesn't work in IE, indexOf is always a good option

Nimer Awad Over a year ago

Okay, just replace .includes(val) with indexOf(val) !== -1

Hemendra Over a year ago

one more thing, your code doesn't work for the case asked in the question. It will still not return if you type "Jacob jj9eqwif Nguyen". You're only checking the fields individually and not together.

Nimer Awad Over a year ago

Okay, i added it

Hemendra Over a year ago

no need for individual cases of fname/mname/lname. Combining the strings and searching in them cover these cases automatically.

|

Hemendra · Accepted Answer · 2019-10-01 08:15:06Z

0

Concatenate the strings from which you want to search and look for the searched value in the concatenated string.

let temp = this.tempData.filter(data => {
    let combinedData = (data.received_by.fname + " " + data.received_by.mname + " " + data.received_by.lname + " " + data.warehouse.name).toLowerCase();
    return combinedData.indexOf(val) >= 0;
}

If there are more columns and you want to search across all of them, you could use JSON.stringify to convert the entire data into string and search in that string.

let temp = this.tempData.filter(data => {
    let combinedData = JSON.stringify(data).toLowerCase();
    return combinedData.indexOf(val) >= 0;
});

I have modified your fork here - https://stackblitz.com/edit/filter-multiple-wujuvz

answered Oct 1, 2019 at 8:15

Hemendra

3885 silver badges13 bronze badges

3 Comments

Joseph Over a year ago

One more thing, if you just type "jj9eqwif Nguyen", it should also appear

Nimer Awad Over a year ago

Doesn't make sense to add warehouse to the combined string; so if i search for name 'Jacob jj9eqwif Nguyen GG' it will return value, but there's no rows with that name!

Hemendra Over a year ago

@Joseph I think the statement in the question to search for combined result is vague and doesn't give an exact idea on what you want to achieve, instead it should say that any combination of fname/mname/lname should work. Also what about ordering of fname/mname/lname during search, for e.g. what about "Nguyen jj9eqwif", should that work too? Please clarify the scenarios in details.

Collectives™ on Stack Overflow

Searching Nested Data In Angular

3 Answers 3

4 Comments

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related