Сохранение и отображение «вложенных» JSON данных из API

Question

У меня есть следующий формат JSON данных, извлеченных из API и сохраненных в IntentList

{
        "id": 22,
        "name": "IntentName",
        "fk_app": 3,
        "fk_intent": null,
        "nlu_models": [],
        "sentences": [
            {
                "text": "text1",
                "id": 2308              
            },
            {
                "text": "text2",
                "id": 2309
            },......

Итак, есть эти уровни: первый имеет «имя» и «предложения», а второй который находится внутри предложений, имеющих «текст». Моя цель - иметь возможность искать данные API по тексту и отображать в каждой строке имя и текст, найденные внутри предложений, связанных с этим текстом. Поэтому, если я ищу «текст», это будет => IntentName text1 IntentName text2, если я буду искать текст1, это появится => IntentName text1

----- Что я делал / пробовал до сих пор ---- - Я искал соответствующий текст и сохранил его объект намерения, и смог отобразить только его имя намерения. Typescript:

 fetchIntentsTxt(event: any) {
    if (event.target.value === '') {
      return this.searchResultINTxt = [];
    }
this.searchResultINTxt = this.IntentList.filter(
      i => i.sentences.some(
        s => s.text.toLowerCase().includes(event.target.value.toLowerCase())));
}

Html:

 <input type="text" autocomplete="off" [(ngModel)]="searchInputINTxt" (keyup)="fetchIntentsTxt($event)"
                    class="form-control" id="search0" placeholder="Search for Intents by Text">

  <a #myIntentTxt *ngFor="let intentTxt of searchResultINTxt" >{{intentTxt.sentences.text(this doesn't work obviously)}}<span
                          class="float-right">{{intentTxt.name}}</span> <br></a>

Любая рекомендация приветствуется, даже если это означало изменение функции поиска. Заранее спасибо.

Answer 1

Пример: https://stackblitz.com/edit/angular-ivy-pyaq7a

Я бы просто создал новый массив в методе fetchIntentsTxt и добавил данные, которые я хочу отобразить, с помощью ввода / поиска пользователя. После «фильтрации» всех данных, которые мне нужны, я установил его в переменную, которая повторяется в представлении / шаблоне.

public fetchIntentsTxt(searchValue: string): void {
    const searchResults = [];
    for (const entry of this.intentList) {
      for (const sentence of entry.sentences) {
        if (sentence.text.toLowerCase().includes(searchValue)) {
          searchResults.push({
            name: entry.name,
            text: sentence.text,
          });
        }
      }
    }

    this.searchResultINTxt = searchResults;
}

Просмотр:

<input type="text" autocomplete="off" [(ngModel)]="searchInputINTxt" (ngModelChange)="fetchIntentsTxt($event)" class="form-control" id="search0" name="search0" placeholder="Search for Intents by Text"/><br />

<a #myIntentTxt *ngFor="let intentTxt of searchResultINTxt">
    {{ intentTxt.text }}<span class="float-right">{{ intentTxt.name }}</span>
    <br/>
</a>

Также обратите внимание, что я использовал (ngModelChange) вместо (keyup) на вводе поиска, поэтому мне не нужно возиться с событиями и просто получить значение, которое мне нужно для фильтрации.