How to correct logic in a search input? Angular

Question

I have a search input in my angular application that should compare the input data with different object properties

        <div class="forms">
          <div class="search-wrapper">
            <input
            class="search"
            [ngClass]="{'searching': searching}"
            type="text"
            (input)="changeSearch($event.target.value)"
            />
            <label class="">
              <span>Rechercher</span>
            </label>
          </div>
        </div>

the logic I use is as follows

    public changeSearch(searchTerm: string) {

        this.searching = !!searchTerm;

        if (!this.searching) {

            this.orders.forEach(order => {
                order.show = true;
            });
            return;
        }

        const extendSearchIn = ['order_number', 'transaction.item.product.name'];

        this.orders.forEach(order => {
            order.show = true;
            extendSearchIn.forEach(property => {
                this.searchByProperty(order, property, searchTerm);
            });
        });
    }

    public searchByProperty(order, property, searchTerm) {

        const prop = this.getSearchProperty(order, property);
        if (prop === undefined) { return false; }
        return (<String>prop.toLowerCase()).startsWith(searchTerm.toLowerCase());

    }

    public getSearchProperty(item: object, property: string) {

        let itemCopy = Object.assign({}, item);
        let result: any;
        const props = property.split('.');
        props.forEach(prop => {

          if (itemCopy !== undefined) {
            itemCopy = itemCopy[prop];
          }

        });

        result = itemCopy !== undefined ? itemCopy : result;
        return result;

      }

and the structure of each object 'order' is like the following

{
  "functional_id": "202006101058160012400000SD4AYAA1",
  "transactions": [
    {
      "quantity": 2,
      "price": 140,
      "item": {
        "name": "Carton",
        "description": "+ 2 recharges",
        "product": {
          "name": "Coffret rouge"
        }
      },
      "amount": 280
    },
    {
      "quantity": 2,
      "price": 140,
      "item": {
        "name": "10 coffrets",
        "description": "+ 2 recharges",
        "product": {
          "name": "Coffret gris"
        }
      },
      "amount": 280
    },
    {
      "quantity": 2,
      "price": 60,
      "item": {
        "name": "PACK N°1 comprenant :",
        "description": "6 modèles",
        "product": {
          "name": "AfuBOX",
          "description": "60,8 x 39,5 x 16,5 cm"
        }
      },
      "amount": 120
    }
  ],
  "show": true,
  "date": "10/06/2020",
  "order_number": "105816",
  "overallAmount": 680
}

you would need to set the 'show' property to false so that those that don't comply with what was entered in the search field would be hidden Someone to make me see where my mistake is. Thank you in advance

Answer 1

I have simplified the logic with a forEach and checking if the value I receive from the input contains any of the search criteria I wanted to apply. I hope that this will help you to explain if you find yourself in a similar situation.

    public changeSearch(searchTerm: string) {

        this.searching = !!searchTerm;

        if (!this.searching) {

            this.orders.forEach(order => {
                order.show = true;
            });
            return;
        }

        this.orders.forEach(order => {
            order.show = true;
            this.searchByProperty(order, searchTerm);
        });
    }

    public searchByProperty(order, searchTerm) {

        const id = (order.order_number + '');
        const amount = (order.overallAmount + '');

        order.transactions.forEach(items => {
            const title = items.item.product.name.toLowerCase();
            if (title.includes(searchTerm) || id.includes(searchTerm) || amount.includes(searchTerm)) {
                order.show = true;
            } else {
                order.show = false;
            }
        });
    }