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

Question

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

What i'm trying to achieve is to only get the name property in the areaCodes objects like this ['New York', 'Florida']

Below is the code i'm using so far which only gets me only the first in the array

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

Answer 1

Is this what you are looking for?

 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); } }

Answer 2

You can use array#flatMap and array#map to extract name from areaCodes .

 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);

Answer 3

And even shorter:

 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)

Answer 4

Try with filter , reduce and 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);

Answer 5

试试这个

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