"Невозможно прочитать свойство '0' из неопределенного" при чтении переменной среды из mongoDB

Question

Я пытаюсь прочитать переменную, которая определена в моем JavaScript. Это запрос на получение от mongoDB. Вся база данных затем сохраняется в переменной, читается HTML и отображается.

Запрос get от MongoDB имеет следующий вывод: (Допустим, это хранится в переменной database):

[
  {
      0:
           {
                TITLE1: valueone
           }
  },
  {
      1:
           {
                TITLE2: valuetwo
           }
  }
]

Мой HTML выглядит так:

<p> {{ database?.TITLE1 }} </p>

Я получаю ошибку Cannot read property '0' of undefined. Я понимаю, что это потому, что мне нужно определить [0], чтобы иметь возможность читать TITLE1.

Исходя из этого, я попробовал следующее:

<p> {{ database?[0].TITLE1 }} </p>

Это ошибка: Template parse errors: Parser Error: Conditional expression database?[0].TITLE1 requires all 3 expressions at the end of the expression [{{ database?[0].TITLE1 }}]

<p> {{ database?.[0].TITLE1 }} </p>

Это ошибка: Template parse errors: Parser Error: Unexpected token [, expected identifier or keyword at column 7 in [{{ database?.[0].TITLE1 }}]

<p> {{ database?.0.TITLE1 }} </p>

Это та же ошибка, что и выше.

Как правильно читать значения, которые мне нужны? В HTML вывод должен быть valueone.

Answer 1

Ну, я имею в виду, что в какой-то момент вы должны немного подумать об основах JS, а не пытаться все, пока оно не заработает ...

Из предоставленного вами кода синтаксис будет

{{ data[0]['0'].TITLE1 }}

Answer 2

Поскольку ваша база данных является массивом, для получения первого элемента необходимо использовать [0], а ключ - число, поэтому для получения значения свойства необходимо использовать ['0'], вы также можете использовать? проверить объект null перед использованием TITLE1

Наконец, вы можете использовать {{ database[0]['0']?.TITLE1 }}

Демо https://stackblitz.com/edit/angular-o79rra

Answer 3

Попробуйте

 <p> {{ database[0]['0']?.TITLE1 }} </p>

Сделайте это динамически:

    <p *ngFor="let item of database; let i = index">
       {{item[i]['TITLE' + (i + 1)]}}
    </p>