Iterating nested array and return flat array

Question

Considering I have a nested array something like:

[
    {
        "uid": "j5Dc9Z",            
        "options": [
            {
                "name": 'Transportation',
                "checked": true,                    
            },
            {
                "name": 'Medication',
                "checked": true,                    
            }
        ]
    },
    {
        "uid": "a5gdfS",
        "options": [
            {
                "name": 'Food supply',
                "checked": true,                    
            },   
        ]
     },
     {
        "uid": "jHab6i",
        "options": [
            {
                "name": "Package distri",
                "checked": true,                    
            },
            {
                "name": "maintainence",
                "checked": false
            }   
        ]
     },  
     {...}    
]

This array is rendered as a part of dynamic checkboxes and checked values are handled on checkbox onChange function. I need to create a final separate array of the options that are only checked: true.

Something like:

[
  {
    "name": "Medication",
    "checked": true,                    
  },
  {
     "name": 'Food supply',
     "checked": true,                    
  },
  {
      "name": 'Transportation',
      "checked": true,                    
  }, and so on..
]

I did try following approach, but it confused on how to achieve this final array:

const category = filterOptions.filters.filter(ele => ele.options.some(option => option.checked === true)).map(item => item.options.filter(data => data.checked === true));

console.log(category);

But these returns result in the format:

0: (2) [{name: 'Transportation', checked: true}, {name: 'Medication', checked: true}]
1: [{name: 'Food Supply', checked: true}]
length: 2
__proto__: Array(0)

Please help out to resolve the same

.map() + .filter() + .flat() or .flatMap() + .filter() — Andreas
– Andreas, Commented Sep 17, 2020 at 18:18
Can you please re-format your script. That "one-liner" is awful to read... — Andreas
– Andreas, Commented Sep 17, 2020 at 18:20

Ori Drori · Accepted Answer · 2020-09-17 18:20:46Z

4

You can flatten the using Array.flatMap(), and then filter out unchecked items:

const data = [{"uid":"j5Dc9Z","options":[{"name":"Transportation","checked":true},{"name":"Medication","checked":true}]},{"uid":"a5gdfS","options":[{"name":"Food supply","checked":true}]},{"uid":"jHab6i","options":[{"name":"Package distri","checked":true},{"name":"maintainence","checked":false}]}]

const result = data.flatMap(o => o.options)
  .filter(o => o.checked)

console.log(result)

answered Sep 17, 2020 at 18:20

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

2 Comments

program_bumble_bee Over a year ago

Thanks a lot buddy. Precise and easy :) . Didn't knew about flatMap().

Ori Drori Over a year ago

You're welcome. There's also Array.flat(), if you need to flatten an array of arrays.

Nina Scholz · Accepted Answer · 2020-09-17 18:23:57Z

1

You could map filtered arrays of wanted objects.

const 
    array = [{ uid: "j5Dc9Z", options: [{ name: "Transportation", checked: true }, { name: "Medication", checked: true }] }, { uid: "a5gdfS", options: [{ name: "Food supply", checked: true }] }, { uid: "jHab6i", options: [{ name: "Package distri", checked: true }, { name: "maintainence", checked: false }] }],
    result = array.flatMap(({ options }) => options.filter(({ checked }) => checked));

console.log(result);

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

answered Sep 17, 2020 at 18:23

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Willem Ruys · Accepted Answer · 2020-09-17 18:25:28Z

You can use forEach():

const arr = [
    {
        "uid": "j5Dc9Z",            
        "options": [
            {
                "name": 'Transportation',
                "checked": true,                    
            },
            {
                "name": 'Medication',
                "checked": true,                    
            }
        ]
    },
    {
        "uid": "a5gdfS",
        "options": [
            {
                "name": 'Food supply',
                "checked": true,                    
            },   
        ]
     },
     {
        "uid": "jHab6i",
        "options": [
            {
                "name": "Package distri",
                "checked": true,                    
            },
            {
                "name": "maintainence",
                "checked": false
            }   
        ]
     } 
]

let finalArr = [];

arr.forEach(item => {
  item.options.forEach((option) => {
    if (option.checked === true) {
      finalArr.push({...option})
    };
  });
});

console.log(finalArr);

gaetanoM · Accepted Answer · 2020-09-17 18:35:49Z

Using array reduce() and spread operator:

var data = [
    {
        "uid": "j5Dc9Z",
        "options": [
            {
                "name": 'Transportation',
                "checked": true,
            },
            {
                "name": 'Medication',
                "checked": true,
            }
        ]
    },
    {
        "uid": "a5gdfS",
        "options": [
            {
                "name": 'Food supply',
                "checked": true,
            },
        ]
    },
    {
        "uid": "jHab6i",
        "options": [
            {
                "name": "Package distri",
                "checked": true,
            },
            {
                "name": "maintainence",
                "checked": false
            }
        ]
    }
];

var result = data.reduce((a, e)  => [...a, ...e.options.filter(e => e.checked == true)], []);

console.log(result);

Collectives™ on Stack Overflow

Iterating nested array and return flat array

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related