如何循环思考 map 并创建特定的 object？ 使用 Javascript

Question

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

I have a problem formatting the array I'm loop through. Main logic function is this:

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

Let me explain what I did here. Loop the thought array and push values. If it is array, the first condition goes, if it is not through, then the second.

Example of allFilters and val you can see on stackblitz and code bellow.

I loop thought array very simple:

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

If are you using VUE.js this is

  <span
    v-for="filter in allFilters" :key="filter.name>
    {{ filter.displayName }}: {{ filter.displayValue }}
  </span>

I need create object like a:

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

The issue is not connected out for vue or angular or even reactions. This is js problem.

Answer 1

No need for such remappings, displaying logic should be usually in template, something like:

<span
*ngFor="let filter of allFilters"
class="badge badge-light my-3 mx-2 px-3 py-1">

<ng-container *ngIf="isArray(filter.value); else noArray">
  <div *ngFor="let obj of filter.displayValue">
    {{filter.displayName}}: {{obj.name}} {{obj.value}}
  </div>
</ng-container>

 <ng-template #noArray>
    {{filter.displayName}}: {{filter.displayValue}}
</ng-template>

</span>

js:

isArray(value) {
    return Array.isArray(value);
}

recieveMessage(val) {
    this.allFilters.push(val);
}

Answer 2

It is possible to do it in template, like this:

<hello name="{{ name }}"></hello>
<div class="span">

  <span
    *ngFor="let filter of allFilters"
    class="badge badge-light my-3 mx-2 px-3 py-1"
  >
<ng-container *ngIf="filter.name != 'Second';else withDate">
 {{ filter.displayName }}: {{ filter.displayValue }}
  </ng-container>

  <ng-template #withDate>
  Second: dateFrom {{ filter.displayValue|slice:0:10 }}<br>
  Second: dateTo: {{ filter.displayValue|slice:13:24 }}
  </ng-template>


  </span>

</div>