Nested Array Filter/Mapping

Question

Probably a basic question, but I've been blocked for a day now on this. I am trying to get the correct map/filter from the following array:

[{
    "id": 1,
    "description": "Electric",
    "subUtilityTypes": [{
        "id": 5,
        "description": "Grid"
      },
      {
        "id": 6,
        "description": "Solar"
      }
    ]
  },
  {
    "id": 2,
    "description": "Gas",
    "subUtilityTypes": [{
        "id": 7,
        "description": "Heating Oil"
      },
      {
        "id": 8,
        "description": "Natural Gas"
      },
      {
        "id": 11,
        "description": "Propane"
      }
    ]
  }
]

I want to get the id and description inside all subUtilityTypes.

This is what I've been trying:

this.options = arr1.map((parent) => {
  return {
    id: parent.id,
    name: parent.subUtilityTypes.flatMap((child) => {
      return child.description;
    })
  };
});

My problem with what I am trying is that instead of creating separate objects I am getting parent id and list of child names like this:

[{
    "id": 1,
    "name": [
      "Grid",
      "Solar"
    ]
  },
  {
    "id": 2,
    "name": [
      "Heating Oil",
      "Natural Gas",
      "Propane"
    ]
  }
]

Expected result should look like this:

[{
    "id": 5,
    "name": [
      "Grid"
    ]
  },
  {
    "id": 6,
    "name": [
      "Solar"
    ]
  },
  {
    "id": 7,
    "name": [
      "Heating Oil"
    ]
  }
]

ulou · Accepted Answer · 2021-06-09 22:15:28Z

3

Firstly use flatMap to get subUtilityTypes, then map entries:

const input = [{id:1,description:"Electric",subUtilityTypes:[{id:5,description:"Grid"},{id:6,description:"Solar"}]},{id:2,description:"Gas",subUtilityTypes:[{id:7,description:"Heating Oil"},{id:8,description:"Natural Gas"},{id:11,description:"Propane"}]}];

const res = input.flatMap(e => e.subUtilityTypes)
                 .map(e => ({ id: e.id, name: [e.description] }))
                 
console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; } /* ignore this */

answered Jun 9, 2021 at 22:15

ulou

5,9326 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2021-06-09 22:13:39Z

Map only arr1 by returning only subUtilityTypes and then map it to get the desired result :

 arr1.flatMap(item=>item.subUtilityTypes)
       .map(item=>({id:item.id,name:[item.description]}))

let arr1=[
    {
        "id": 1,
        "description": "Electric",
        "subUtilityTypes": [
            {
                "id": 5,
                "description": "Grid"
            },
            {
                "id": 6,
                "description": "Solar"
            }
        ]
    },
    {
        "id": 2,
        "description": "Gas",
        "subUtilityTypes": [
            {
                "id": 7,
                "description": "Heating Oil"
            },
            {
                "id": 8,
                "description": "Natural Gas"
            },
            {
                "id": 11,
                "description": "Propane"
            }
        ]
    }
]

let options=arr1.flatMap(item=>item.subUtilityTypes).map(item=>({id:item.id,name:[item.description]}))

console.log(options)

DecPK · Accepted Answer · 2021-06-09 22:25:42Z

You can also use reduce to achieve the same result.

arr.reduce((acc, curr) => [...acc,...curr.subUtilityTypes.map((o) => ({ id: o.id, name: [o.description] })),],[])

const arr = [
  {
    id: 1,
    description: "Electric",
    subUtilityTypes: [
      {
        id: 5,
        description: "Grid",
      },
      {
        id: 6,
        description: "Solar",
      },
    ],
  },
  {
    id: 2,
    description: "Gas",
    subUtilityTypes: [
      {
        id: 7,
        description: "Heating Oil",
      },
      {
        id: 8,
        description: "Natural Gas",
      },
      {
        id: 11,
        description: "Propane",
      },
    ],
  },
];

const result = arr.reduce((acc, curr) => [...acc,...curr.subUtilityTypes.map((o) => ({ id: o.id, name: [o.description] })),],[]);
console.log(result);

Collectives™ on Stack Overflow

Nested Array Filter/Mapping

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related