Как исправить логи c в поисковом запросе? Angular - PullRequest
Новая
       15

Как исправить логи c в поисковом запросе? Angular

0 голосов
/ 16 июня 2020

У меня есть вход для поиска в моем angular приложении, которое должно сравнивать входные данные с различными свойствами объекта 

        <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>

лог c, который я использую, выглядит следующим образом 

    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;

      }

и структура каждого объекта 'order' подобна следующей 

{
  "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
}

, вам нужно будет установить для свойства 'show' значение false, чтобы те, которые не соответствуют тому, что было введено в поле поиска будет скрыто Кто-то, чтобы я увидел, в чем моя ошибка. Заранее спасибо

1 Ответ

0 голосов
/ 16 июня 2020

Я упростил logi c с помощью forEach и проверял, содержит ли значение, которое я получаю из ввода, какие-либо критерии поиска, которые я хотел применить. Надеюсь, это поможет вам объяснить, если вы окажетесь в подобной ситуации. 

    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;
            }
        });
    }
...