如何轉換 json 並顯示 html 中的所有數據？ 使用 Javascript 和 Map

Question

我需要循環思想數組並顯示屬性數據。

所有代碼都在這里：

https://stackblitz.com/edit/angular-display-show-json-in-propertlu-format?file=src%2Fapp%2Fapp.component.ts

檢查 ts 中的循環：

this.allFilters.push(
  Array.isArray(val.value)
    ? {
        name: val.name,
        value: val.value.map((obj: any) => obj.value).join(" - "),
        displayName: val.displayName,
        displayValue: val.value.map((obj: any) => obj.value).join(" - ")
      }
    : {
        name: val.name,
        value: val.value,
        displayName: val.displayName,
        displayValue: val.displayValue
      }
);

和 html：

  <span
    *ngFor="let filter of allFilters">
    {{ filter.displayName }}: {{ filter.displayValue }}
  </span>

現在的結果是：

 First: 2 Second: 2021-04-08 - 2021-04-20 Third: 15

但我需要將日期與 dateFrom 和 dateTo 分開，並顯示如下：

 First: 2 Second: dateFrom 2021-04-08 Second: dateTo: 2021-04-20 Third: 15

或者

 First: 2 dateFrom: 2021-04-08 dateTo: 2021-04-20 Third: 15

Answer 1

首先，您需要平整您的陣列。 我已經編輯了您在鏈接的代碼中使用的“recieveMessage”function。

recieveMessage(val) {
    if(Array.isArray(val.value)){  
      val.value.forEach(child => this.allFilters.push({
        name: val.name,
        value: child.value,
        displayName: val.displayName + ' ' + child.name,
        displayValue: child.value
      }))
    } else {
      this.allFilters.push({
        name: val.name,
        value: val.value,
        displayName: val.displayName,
        displayValue: val.displayValue
      });
    }
  }