Как перебрать данные с помощью ngFor или другого с объектами, содержащими массивы?

Question

У меня есть массив объектов, которые выглядят примерно так:

[
    {
    id: 1,
    settings: "[{object},{object}]", <-- stringifiedJSON
    stats: "[{object}, {object}]" <-- stringifiedJSON
    },
    {
    id: 2,
    settings: "[{object},{object}]", <-- stringifiedJSON
    stats: "[{object}, {object}]" <-- stringifiedJSON
    },
]

В запросе я использую метод map для массива и анализирую строки следующим образом:

settings = [];
stats = [];

getAllArchives(){
    this.archiveService.getArchives()
    .subscribe(
      response => {
        if(response) {
          this.archives = response.data;
          this.stats = this.archives.map(archive => JSON.parse(archive.stats));
          this.settings = this.archives.map(archive => JSON.parse(archive.game_settings));
          console.log(this.stats);<-this logs the two stats arrays correctly
        }
      }
    )
  }

Я пытаюсь затем отобразить их в браузере, используя:

*ngFor="let archive of archives" - there are currently 2 objects in this array

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

Я понимаю, почему это происходит, но ранее я не сталкивался со временем, когда мне приходилось перебирать массивы внутри массивов, уникальных для конкретного объекта.

Я искал прецедент, но пока не нашел подобной проблемы.

Я в основном пытаюсь повторить что-то подобное в конце, но не могу справиться.

[1] настройка, [1] статистика

[2] настройка, [2] статистика

, что я получаю в минуту:

[1] настройка, Настройка [2], [1] статистика, [2] статистика

[1] настройка, настройка [2], [1] статистика, [2] статистика

Есть ли лучшеспособ установить данные, прежде чем они отображаются в компоненте? Могу ли я эффективно индексировать цикл ngfor для правильного отображения данных? Я в тупике.

Answer 1

Здесь вы можете использовать отображение для итерации по массиву archives и преобразования stringified JSONs в правильные JSON objects.

this.archives.map(x => {
    x.settings = JSON.parse(x.settings);
    x.stats = JSON.parse(x.stats);
});

Затем вы можете использовать *ngFor в settings и statsтакже. Пример html:

<div *ngFor="let archive of archives">
    <p>{{archive.id}}</p>
    <div *ngFor="let setting of archive.settings">
        <p>{{setting.<property>}}</p>
    </div>
    <div *ngFor="let stats of archive.stats">
        <p>{{stats.<property>}}</p>
    </div>
</div>

Вот рабочая демоверсия