在 json 中查找并在另一个 json 中设置答案

【问题标题】：Find in json and set in another json在 json 中查找并在另一个 json 中设置
【发布时间】：2020-01-08 12:32:07
【问题描述】：

我有 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'}

我在角材料表中显示这些数据

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

我需要在第二个 JSON 元素中搜索位置编号为 1 或 2 等...，并设置 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 )
);

在材料表中

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

在 VScode 中出现错误

调用目标不可调用

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

这里是stackblitz

【问题讨论】：

你不能先更新第一个 JSON 再上桌吗？
我只需要在应用程序中的一个特定位置更改此编号 => 名称，在我需要编号的任何其他位置，因此我希望有一些解决方案可以像这样从 html 表中更改它{{ (elements | async)(elements.position) }} 就像我解释了我的尝试，但由于某种原因，这进入了无限循环

标签： javascript arrays json angular

【解决方案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

【讨论】：

非常漂亮流畅... thnx
无法使用 FilterData 管道搜索此行...您知道如何解决此问题吗？谢谢
@Arter 请在您的组件中添加以下代码。 ngOnInit() { this.dataSource.filterPredicate = function(data, filter: string): boolean { var dataa = ELEMENT_DATA_TITLE.filter( element => element.position === data.position );返回 data.position.toString().toLowerCase().includes(filter) || data.symbol.toLowerCase().includes(filter) || data.position.toString().toLowerCase() === 过滤器 || dataa[0].name.toString().toLowerCase().includes(filter.toLowerCase()); }; }
还添加以下搜索代码： public doFilter = (value: string) => { value = value.trim(); // 删除空格 value = value.toLowerCase(); // MatTableDataSource 默认小写匹配 this.dataSource.filter = value; }
@Arter stackblitz.com/edit/angular-ttg6ux-sokueh?file=src/app/… 请检查此网址。

【解决方案2】：

我认为您可以使用reduce() 和find() 组合来解决您的问题。

正如Array.prototype.reduce() 文档所述：

reduce() 方法对数组的每个元素执行（您提供的）reducer 函数，从而产生单个输出值。

const arr1 = [
  {position: 1, weight: 1.0079, symbol: 'H'},
  {position: 2, weight: 4.0026, symbol: 'He'}
], arr2 = [
  {position: 1, name: 'Hydrogen'},
  {position: 2, name: 'Helium'}
];

const result = arr2.reduce((a, c) => {
  const elem = arr1.find(e => e.position === c.position);
  
  a.push({
    name: c.name,
    weight: elem.weight,
    symbol: elem.symbol
  })
  return a;
}, []);

console.log(result);

希望对你有帮助！

【讨论】：