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

Question

在下面stackblitz样本。我有以下数据:

我的表显示了我想要的内容，正如您在时间线对象中看到的那样，“开始” 值与 aval 数组<中的值完全相同

因此，无论如何我可以在没有时间轴对象的情况下显示那些表头吗？ (使用 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

假设您想要员工列表中的 aval 列表，您可以尝试结合使用 map 和 reduce

• 映射以创建数组数组，该数组将具有特定员工的所有开始 aval 值 employee -> aval -> start

• Reduce 以展平数组的数组

• 最后使用 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 **************");