Angular Search/Filter items from Array with input field

Question

<div class="container">
  <table>
    <thead>
      <div class="searchfield">
        <input
          type="text"
          [(ngModel)]="firstName"
          (input)="Search()"
          placeholder="Search"
        />
      </div>
    </thead>

    <tbody>
      <tr>
        <th (click)="sortItems(entry.id)" scope="row">ID</th>
        <td (click)="sortItems(entry.firstName)" colspan="2">
          <label for="taskbar">Name</label>
        </td>
        <td (click)="sortItems(entry.secondName)" colspan="2">
          <label for="taskbar">Vorname</label>
        </td>
        <td (click)="sortItems(entry.firstMobileNumber)" colspan="2">
          <label for="mobileNumber">Mobilfunknummer 1 </label>
        </td>
        <td (click)="sortItems(entry.secondMobileNumber)" colspan="2">
          <label for="secondMobileNumber">Mobilfunknummer 2 </label>
        </td>
        <td (click)="sortItems(entry.firstEmail)" colspan="2">
          <label for="email">E-Mail 1 </label>
        </td>
        <td (click)="sortItems(entry.secondEmail)" colspan="2">
          <label for="email">E-Mail 2 </label>
        </td>
        <td (click)="sortItems(entry.roomNumber)" colspan="2">
          <label for="roomNumber">Raumnummer </label>
        </td>
        <td (click)="sortItems(entry.task)" colspan="2">
          <label for="task">Aufgabe </label>
        </td>
      </tr>

      <tr *ngFor="let entry of listOfContacts">
        <!-- Nur die Kopie wird angezeigt! -->

        <th scope="row">{{entry.id}}</th>

        <td colspan="2">{{entry.firstName}}</td>
        <td colspan="2">{{entry.secondName}}</td>
        <td colspan="2">{{entry.firstMobileNumber}}</td>
        <td colspan="2">{{entry.secondMobileNumber}}</td>
        <td colspan="2">{{entry.firstEmail}}</td>
        <td colspan="2">{{entry.secondEmail}}</td>
        <td colspan="2">{{entry.roomNumber}}</td>
        <td colspan="2">{{entry.task}}</td>
        <td>
          <button
            class="buttonDelete"
            (click)="openDialogDelete(entry.id)"
            color="warn"
          >
            Delete
          </button>
        </td>
        <td>
          <button (click)="openDialogEdit(entry.id)" class="btn btn-secondary">
            Edit
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="buttonAdd" (click)="openDialogAdd()">Add</button>
</div>

export class TableListComponent implements OnInit {
  entry: ContactListEntry = {
    id: null,
    firstName: '',
    secondName: '',
    firstMobileNumber: '',
    secondMobileNumber: '',
    firstEmail: '',
    secondEmail: '',
    roomNumber: '',
    task: '',
    notes: '',
  };

  listOfContacts = [];
  firstName: string;

  constructor(private dataServiceService: DataServiceService, private dialog: MatDialog) {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  ngOnInit(): void {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  Search() {
    if (this.firstName != '') {
      this.listOfContacts = this.listOfContacts.filter((res) => {
        return res.firstName.toLocaleLowerCase().match(this.firstName.toLocaleLowerCase());
      });
    } else if (this.firstName == '') {
      this.ngOnInit();
    }
  }
}

I want that when I enter things in the search field that mobileNumber is also searched for or the other items in the objects of the array are searched for, so not just firstName but all other items as well.

Unfortunately, at the moment it only works with firstName, so the other items from entry are not searched for

vaira · Accepted Answer · 2021-11-23 11:51:54Z

1

While writing code name of the variable should be defined what they are meant for: if you want it to search everything it should be called searchText:

<input type="text" [(ngModel)]="searchText" (input)="Search()" placeholder="Search" />

Search is only searching on name since you have not compared it with anything else.

    Search(){
    
      if(this.searchText!== ""){
    let searchValue = this.searchText.toLocaleLowerCase();

        this.listOfContacts = this.listOfContacts.filter(contact =>{
          return contact.firstName.toLocaleLowerCase().match(searchValue ) ||
    contact.secondName.toLocaleLowerCase().match(searchValue) ||
    contact.email.toLocaleLowerCase().match(searchValue);
 // you can keep on adding object properties here   
    
        });
    
      }else {  // if(this.searchText== ""){ you don't need this if
        this.ngOnInit();
      } 
}

edited Nov 23, 2021 at 11:51

answered Nov 23, 2021 at 11:44

vaira

2,2801 gold badge13 silver badges16 bronze badges

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

3 Comments

max_flu Over a year ago

It shows cannot find name res

vaira Over a year ago

I have corrected it but it really seems you don't understand how arrow function works

max_flu Over a year ago

Thanks for your help, I'll try a few things now and write to you again later if everything worked

Muhammed Hamza Gaya · Accepted Answer · 2021-11-23 11:48:49Z

0

you can try this, in this solution we are traversing over every item in the object of the list and looking for type of the item like string or number and equate on behalf of that and if any of the condition matches the search value it will return the filtered data

this.filteredItems = this.listToFilter.filter(item => {
                for (let key in item) {
                    try {
                        if (typeof item[key] == 'string') {
                            let result = ((item[key]) ? item[key].toLowerCase().indexOf(value.toLocaleLowerCase()) !== -1 : false);
                            if (result == true) return true;
                        } else if (typeof item[key] == 'number') {
                let result = ((item[key]) ? item[key] === value : false)
            }
                    } catch (e) {
                    }
                }
                return false;
            });

answered Nov 23, 2021 at 11:48

Muhammed Hamza Gaya

11 bronze badge

3 Comments

vaira Over a year ago

thought it might work, but you are assuming that there are only keys and number in the search and why does the number need to be full match

vaira Over a year ago

if you only need to handle string an number this will work in one line: listToFilter.find(item => Object.values(item).some(value => value.toString().includes(searchText)));

Muhammed Hamza Gaya Over a year ago

indeed you are right that i have just considered the STRING and NUMBER, just to complement the above case. We can enhance it by our requirements, I had just proposed the idea that how can we achieve the search for every item in the object.

Collectives™ on Stack Overflow

Angular Search/Filter items from Array with input field

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related