CODEWITHSUNDEEP
javascriptarraysobject
program_bumble_bee
program_bumble_bee

Reputation: 305

Iterating nested array and return flat array

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 ​

Upvotes: 0

Views: 50

Answers (4)

gaetanoM
gaetanoM

Reputation: 42054

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

Upvotes: 1

Willem Ruys
Willem Ruys

Reputation: 31

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

Upvotes: 1

Nina Scholz
Nina Scholz

Reputation: 386848

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

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 193012

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)

Upvotes: 4

Related Questions