javascript - 根据在另一个数组中设置的 true 或 false 映射一个数组

Question

我有一个项目“mockData”数组和一个 Angular 为 8 的过滤器数组“filter”:

filter=[
{column:"name",show:true},
{column:"Sex",show:false},
];

mockData=[
{name:"test",sex:"m"},
{name:"test2",sex:"m"},
{name:"test3",sex:"f"},
{name:"test4",sex:"f"},
];

我只想映射在过滤器数组中设置为 true 的 mockData 列。

结果应该是这样的。

[
{name:"test"},
{name:"test2"},
{name:"test3"},
{name:"test4"},
]

它应该强制检查过滤器。

Answer 1

const filter = [
  {
    column: "name",
    show: true
  },
  {
    column: "sex",
    show: false
  }
];

const mockData = [
  {
    name: "test",
    sex: "m"
  },
  {
    name: "test2",
    sex: "m"
  },
  {
    name: "test3",
    sex: "f"
  },
  {
    name: "test4",
    sex: "f"
  }
];

const filteredMockData = mockData.map(data =>
  Object.entries(data).reduce(
    (result, [key, value]) =>
      filter.find(f => f.column === key && f.show)
        ? { ...result, [key]: value }
        : result,
    {}
  )
);

console.log(filteredMockData);