使用 es6 将对象中的对象中的值作为数组获取答案

【问题标题】：get values in an object in object as array with es6使用 es6 将对象中的对象中的值作为数组获取
【发布时间】：2021-09-13 17:46:31
【问题描述】：

I'm pulling data from a service that loads into a dropdown and when a value is selected it's being assigned to a variable and an example is below

[{
    "id": 482,
    "firstName": "Micheal",
    "lastName": "Bamford",
    "email": "lalacifay@cliptik.net",
    "areaCodes": [
        {
            "id": 60,
            "name": "New York",
            "status": "ACTIVE",
            "createdDate": "2018-10-30 14:09:28"
        },
        {
            "id": 12,
            "name": "Florida",
            "status": "ACTIVE",
            "createdDate": "2018-10-30 14:09:28"
        }
    ],

    "createdDate": "2019-01-03 12:29:33"
}]

我想要实现的是只在 areaCodes 这样的 ['New York', 'Florida'] 对象中获取 name 属性

下面是我目前使用的代码，它只让我得到数组中的第一个

const selected = this.listFromAPI.filter(t => t.id === ev.id).map(r=> r.areaCodes[0].name);

【问题讨论】：

什么是ev.id？..
ev.id 是选择后从下拉列表中抓取的值
listFromAPI 是一个数组。它有其他元素吗？您是否想要来自所有元素的所有 areaCodes 的名称，因为您的代码中有带有 id 的过滤器。

标签： javascript angular ecmascript-6

【解决方案1】：

这是你要找的吗？

const dataset = [{
  "id": 482,
  "firstName": "Micheal",
  "lastName": "Bamford",
  "email": "lalacifay@cliptik.net",
  "areaCodes": [{
      "id": 60,
      "name": "New York",
      "status": "ACTIVE",
      "createdDate": "2018-10-30 14:09:28"
    },
    {
      "id": 12,
      "name": "Florida",
      "status": "ACTIVE",
      "createdDate": "2018-10-30 14:09:28"
    }
  ],

  "createdDate": "2019-01-03 12:29:33"
}];

for (const item of dataset) {
  const {
    areaCodes
  } = item;
  if (Array.isArray(areaCodes)) {
    const names = areaCodes.map(c => c.name);
    console.log(names);
  }
}

【讨论】：

【解决方案2】：

您可以使用array#flatMap 和array#map 从areaCodes 中提取name。

const data = [{ "id": 482, "firstName": "Micheal", "lastName": "Bamford", "email": "lalacifay@cliptik.net", "areaCodes": [{ "id": 60, "name": "New York", "status": "ACTIVE", "createdDate": "2018-10-30 14:09:28" }, { "id": 12, "name": "Florida", "status": "ACTIVE", "createdDate": "2018-10-30 14:09:28" } ], "createdDate": "2019-01-03 12:29:33" }],
    result = data.flatMap(o => o.areaCodes.map(({name}) => name));
console.log(result);

【讨论】：

我认为使用 Set 来获取唯一值也很有意义
是的，它会是，但不幸的是，OP 并没有要求独特的价值。

【解决方案3】：

甚至更短：

const obj = [{
    "id": 482,
    "firstName": "Micheal",
    "lastName": "Bamford",
    "email": "lalacifay@cliptik.net",
    "areaCodes": [
        {
            "id": 60,
            "name": "New York",
            "status": "ACTIVE",
            "createdDate": "2018-10-30 14:09:28"
        },
        {
            "id": 12,
            "name": "Florida",
            "status": "ACTIVE",
            "createdDate": "2018-10-30 14:09:28"
        }
    ],

    "createdDate": "2019-01-03 12:29:33"
}]


const res = obj[0].areaCodes.map(i=>i.name);

console.log(res)

【讨论】：

【解决方案4】：

试试filter、reduce和map，

const listFromAPI = [
  {
    id: 482,
    firstName: "Micheal",
    lastName: "Bamford",
    email: "lalacifay@cliptik.net",
    areaCodes: [
      {
        id: 60,
        name: "New York",
        status: "ACTIVE",
        createdDate: "2018-10-30 14:09:28",
      },
      {
        id: 12,
        name: "Florida",
        status: "ACTIVE",
        createdDate: "2018-10-30 14:09:28",
      },
    ],

    createdDate: "2019-01-03 12:29:33",
  },
];

// Value grabbed from drop down selector
const ev = {
  id: 482,
};

const result = listFromAPI
  .filter((t) => t.id === ev.id)
  .reduce((temp, currentVal) => {
    if (currentVal.areaCodes && Array.isArray(currentVal.areaCodes)) {
      currentVal.areaCodes.map((el) => {
        temp.push(el.name);
      });
    }

    return temp;
  }, []);

console.log(result);

【讨论】：

【解决方案5】：

试试这个

const selected = this.listFromAPI.filter(t => t.id === ev.id).map(r => r.areaCodes.map(areaCode => areaCode.name));

【讨论】：