javascript - 在json中查找并在另一个json中设置

Question

我有包含此数据的 JSON 1

{position: 1, weight: 1.0079, symbol: 'H'},
{position: 2, weight: 4.0026, symbol: 'He'}

我还有另一个包含此数据的 JSON 2

{position: 1, name: 'Hydrogen'},
{position: 2, name: 'Helium'}

我在 Angular Material 表中显示了这些数据

POSITION   |   WEIGHT   |   SYMBOL
1          |   1.0079   |   H
2          |   4.0026   |   He

我需要搜索位置编号为 1 或 2 等的第二个 JSON 元素...，并设置 name 而不是数字，并获取第一个 JSON 表，如下所示

POSITION   |   WEIGHT   |   SYMBOL
Hydrogen   |   1.0079   |   H
Helium     |   4.0026   |   He

有没有直接的方法可以做到这一点，而不是将所有数据推送到新的 JSON？

因为我使用 ngrx@store，所以我尝试制作选择器并直接将数据获取到 HTML 中的表格，但出现无限循环

export const selectElements = createSelector(
  selectElements , 
  element => (position: string) => element [position]
);

this.elements= this.store.pipe(
  select(elements.selectElements )
);

在 Material 表中

{{ (elements | async)(elements.position) }} 

并在 VScode 中出现错误

Call target is not callable

我也尝试使用 .find() 但同样的错误，无限循环...

这里是stackblitz

Answer 1

请使用如下过滤器:

@Pipe({
  name: 'FilterData'
})
export class OrdinalPipe implements PipeTransform {

  transform(value: Element): string {
    var data =   ElementTitle.filter(
          ElementTitle => ElementTitle.position === value);
          return  data[0].name; 
  }
}

HTML 代码:

    <ng-container matColumnDef="position">
          <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element.position |FilterData }} </mat-cell>
   </ng-container>

这是具有过滤功能的 URL。 https://stackblitz.com/edit/angular-ttg6ux-sokueh?file=src/app/table-filtering-example.ts