Question

在以下stackblitz示例中。我有以下数据：

我的表正在显示我想要的东西，正如您在时间轴对象中看到的那样，“开始” 值与 aval 数组中的值完全相同< / p>

因此，有没有办法可以显示那些没有时间轴对象的表标题？（使用filter，reduce或Array.from）也许我可以循环到嵌套的 aval 数组，并将它们作为单个数组获取，就像

"aval" = ["11-19", "11-20", "11-21", "11-22"]

我正在使用过滤器，但到目前为止却无济于事。

数据：

{
  "timeline": {
    "timeline_values": [{
        "tag": 0,
        "start": "11-19"
      },
      {
        "tag": 1,
        "start": "11-20"
      },
      {
        "tag": 2,
        "start": "11-21"
      },
      {
        "tag": 3,
        "start": "11-22"
      }
    ]
  },
  "employees": [{
      "EmployeeID": "56250f",
      "FirstName": "Downs",
      "aval": [{
          "start": "11-19",
          "end": "2",
          "ava": "30",
          "health": "4"
        },
        {
          "start": "11-20",
          "end": "2",
          "ava": "40",
          "health": "4"
        },
        {
          "start": "11-21",
          "end": "2",
          "ava": "50",
          "health": "4"
        },
        {
          "start": "11-22",
          "end": "2",
          "ava": "60",
          "health": "4"
        }
      ]
    },

Answer 1

假设您希望从员工列表中选择清单，则可以尝试使用map和reduce的组合

映射以创建一个数组数组，该数组将具有特定员工employee-> aval-> start
缩小以平整数组
最后使用ES6 Set来选择唯一值。

const employees = [{
    "EmployeeID": "56250f",
    "FirstName": "Downs",
    "aval": [{
        "start": "11-19",
        "end": "2",
        "ava": "30",
        "health": "4"
      },
      {
        "start": "11-20",
        "end": "2",
        "ava": "40",
        "health": "4"
      },
      {
        "start": "11-21",
        "end": "2",
        "ava": "50",
        "health": "4"
      },
      {
        "start": "11-22",
        "end": "2",
        "ava": "60",
        "health": "4"
      }
    ]
  },
  {
    "EmployeeID": "56250f",
    "FirstName": "Mckenzie",
    "aval": [{
        "start": "11-19",
        "end": "2",
        "ava": "1",
        "health": "4"
      },
      {
        "start": "11-20",
        "end": "2",
        "ava": "2",
        "health": "4"
      },
      {
        "start": "11-21",
        "end": "2",
        "ava": "3",
        "health": "4"
      },
      {
        "start": "11-22",
        "end": "2",
        "ava": "4",
        "health": "4"
      }
    ]
  }, {
    "EmployeeID": "56250f",
    "FirstName": "Charles",
    "aval": [{
        "start": "11-19",
        "end": "2",
        "ava": "100",
        "health": "4"
      },
      {
        "start": "11-20",
        "end": "2",
        "ava": "200",
        "health": "4"
      },
      {
        "start": "11-21",
        "end": "2",
        "ava": "300",
        "health": "4"
      },
      {
        "start": "11-22",
        "end": "2",
        "ava": "400",
        "health": "4"
      }
    ]
  }
]

const mappedAvals = employees.map(emp => emp.aval.map(av => av.start));
console.log("************* MAPPED AVALS **************");
console.log(mappedAvals);
console.log("************* MAPPED AVALS **************");

const flattenedAvals = mappedAvals.reduce((acc, aval) => [...acc, ...aval], []);

console.log("************* FLATTENED AVALS **************");
console.log(flattenedAvals);
console.log("************* FLATTENED AVALS **************");

const distinctAvals = [...(new Set(flattenedAvals))];

console.log("************* DISTINCT AVALS **************");
console.log(distinctAvals);
console.log("************* DISTINCT AVALS **************");

Answer 2

您还可以使用flatMap（如果支持）和Set：

const aval = [...new Set(employees.flatMap(e => e.aval.map(a => a.start)))];

const employees = [{
    "EmployeeID": "56250f",
    "FirstName": "Downs",
    "aval": [{
        "start": "11-19",
        "end": "2",
        "ava": "30",
        "health": "4"
      },
      {
        "start": "11-20",
        "end": "2",
        "ava": "40",
        "health": "4"
      },
      {
        "start": "11-21",
        "end": "2",
        "ava": "50",
        "health": "4"
      },
      {
        "start": "11-22",
        "end": "2",
        "ava": "60",
        "health": "4"
      }
    ]
  },
  {
    "EmployeeID": "56250f",
    "FirstName": "Mckenzie",
    "aval": [{
        "start": "11-19",
        "end": "2",
        "ava": "1",
        "health": "4"
      },
      {
        "start": "11-20",
        "end": "2",
        "ava": "2",
        "health": "4"
      },
      {
        "start": "11-21",
        "end": "2",
        "ava": "3",
        "health": "4"
      },
      {
        "start": "11-22",
        "end": "2",
        "ava": "4",
        "health": "4"
      }
    ]
  }, {
    "EmployeeID": "56250f",
    "FirstName": "Charles",
    "aval": [{
        "start": "11-19",
        "end": "2",
        "ava": "100",
        "health": "4"
      },
      {
        "start": "11-20",
        "end": "2",
        "ava": "200",
        "health": "4"
      },
      {
        "start": "11-21",
        "end": "2",
        "ava": "300",
        "health": "4"
      },
      {
        "start": "11-22",
        "end": "2",
        "ava": "400",
        "health": "4"
      }
    ]
  }
]

const aval = [...new Set(employees.flatMap(e => e.aval.map(a => a.start)))];
console.log(aval);

获取嵌套的对象值并将其放在表头上

2 个答案: