如何遍历地图并创建特定对象？使用 Javascript答案

【问题标题】：How to loop thought map and create specific object ? Using Javascript如何遍历地图并创建特定对象？使用 Javascript
【发布时间】：2021-04-20 16:09:40
【问题描述】：

您可以在此处找到所有代码：https://stackblitz.com/edit/angular-display-show-json-in-propertlu-format?file=src%2Fapp%2Fapp.component.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
      }
);

让我解释一下我在这里做了什么。循环思想数组并推送值。如果是数组，则第一个条件，如果不通过，则第二个。

你可以在 stackblitz 和下面的代码中看到 allFilters 和 val 的示例。

我循环认为数组很简单：

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

如果你使用的是 VUE.js，这是

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

我需要创建像这样的对象：

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

问题与 vue 或 Angular 甚至反应无关。这是js的问题。

【问题讨论】：

这不清楚，“我需要创建类似的对象”看起来与您的堆栈闪电战完全不同。另外，stackblitz 中的“缺少 3 和 4”是什么意思？什么 3 和 4？
我更新了 stackblitz。再次检查，对不起

标签： javascript angular vue.js

【解决方案1】：

不需要这种重新映射，显示逻辑通常应该在模板中，例如：

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

【讨论】：

【解决方案2】：

可以在模板中做，像这样：

<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>

【讨论】：