代码之家 › 专栏 › 技术社区 › brohymn

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

reduce angular arrays javascript

brohymn · 技术社区 · 6 年前

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

我的表显示了我想要的,正如您在Timeline对象中看到的, “开始” 值与 阿瓦尔 数组

因此,是否可以在不显示时间线对象的情况下显示这些表标题?(使用filter、reduce或array.from)也许我可以循环到非常嵌套的 阿瓦尔 把它们排列成一个单独的数组

"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"
        }
      ]
    },

2 回复 | 直到 6 年前

Nandu Kalidindi 6 年前

假设您想要员工列表中的AVL列表,您可以尝试以下组合: map 和 reduce

映射以创建数组数组,该数组将具有特定员工的所有start aval值。 employee -gt; aval -gt; 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 **************");

slider 6 年前

您也可以使用 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);