How to convert json and show all data in html ? using Javascript and Map

Question

I need to loop thought array and show property data.

All code is here:

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

Check loop in 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
      }
);

and html:

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

Right now result is:

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

But what I need is to separate date to dateFrom and dateTo and show like a:

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

OR

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

Answer 1

first you need to flat your array. I have edited the "recieveMessage" function you are using in the code you linked.

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