title: Javascript: Efficient way Nested Array mapping & filtering to get the desired results
body: <p>I have tried the below solution for question2 to get result2. What would be a more efficient way to get both the result (result1, result2 &amp; result3) with the same code?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>question1 = [
    {
      "groupName": "Group 1",
      "id": "group1",
      "options": [
        {
          "name": "Cat1",
          "selected": true
        },
        {
          "name": "Cat2",
          "selected": true
        },
        {
          "name": "Cat3",
          "selected": false
        },
        {
          "name": "Cat4",
          "selected": false
        }
      ]
    },
    {
      "groupName": "Group 2",
      "id": "Brand",
      "options": [
        {
          "name": "brand1",
          "selected": false
        },
        {
          "name": "brand2",
          "selected": true
        },
        {
          "name": "brand3",
          "selected": false
        }
      ]
    },
    {
      "groupName": "Group 3",
      "id": "Price",
      "options": [
        {
          "name": "$0 - $9",
          "selected": false
        },
        {
          "name": "$9 - $19",
          "selected": false
        },
        {
          "name": "$20 - $29",
          "selected": false
        }
      ],
      "range": {
        "min": 5,
        "max": 20
      }
    }
  ]</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>result1 = [{
      "groupName": "Group 1",
      "id": "group1",
      "name": "Cat1",
    },
    {
      "groupName": "Group 1",
      "id": "group1",
      "name": "Cat2",
    },
    {
      "groupName": "Group 2",
      "id": "Brand",
      "name": "brand2",
    },
    {
      "groupName": "Group 3",
      "id": "Price",
      "min": 5,
      "max": 20
    }
  ]</code></pre>
  </div>
  </div>
  </p>
  <p>I have a solution for question2, although I know it's not very efficient, so what could be a better solution?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>question2 = [
    {
      "groupName": "Group 1",
      "id": "group1",
      "options": [
        {
          "name": "Cat1",
          "selected": true
        },
        {
          "name": "Cat2",
          "selected": false
        },
        {
          "name": "Cat3",
          "selected": false
        },
        {
          "name": "Cat4",
          "selected": false
        }
      ]
    },
    {
      "groupName": "Group 2",
      "id": "Brand",
      "options": [
        {
          "name": "brand1",
          "selected": false
        },
        {
          "name": "brand2",
          "selected": true
        },
        {
          "name": "brand3",
          "selected": false
        }
      ]
    },
    {
      "groupName": "Group 3",
      "id": "Price",
      "options": [
        {
          "name": "$0 - $9",
          "selected": true
        },
        {
          "name": "$9 - $19",
          "selected": false
        },
        {
          "name": "$20 - $29",
          "selected": false
        }
      ],
      "range": {
        "min": null,
        "max": null
      }
    }
  ]
  
  
  const selected2 = question2.map(group =&gt; group.options.filter(option =&gt; option.selected).map(option =&gt; ({groupName: group.groupName, id: group.id, name: option.name}))).flat(1)
  
  
  console.log(selected2)</code></pre>
  </div>
  </div>
  </p>
  <p>For question3, group 1, none of the options is selected and correspondingly I should get result3. So, only if any of the options are selected or the price has a range (either min/max/both min&amp;max), it is displayed in the result.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>question3 = [
    {
      "groupName": "Group 1",
      "id": "group1",
      "options": [
        {
          "name": "Cat1",
          "selected": false
        },
        {
          "name": "Cat2",
          "selected": false
        },
        {
          "name": "Cat3",
          "selected": false
        },
        {
          "name": "Cat4",
          "selected": false
        }
      ]
    },
    {
      "groupName": "Group 2",
      "id": "Brand",
      "options": [
        {
          "name": "brand1",
          "selected": false
        },
        {
          "name": "brand2",
          "selected": true
        },
        {
          "name": "brand3",
          "selected": false
        }
      ]
    },
    {
      "groupName": "Group 3",
      "id": "Price",
      "options": [
        {
          "name": "$0 - $9",
          "selected": false
        },
        {
          "name": "$9 - $19",
          "selected": false
        },
        {
          "name": "$20 - $29",
          "selected": false
        }
      ],
      "range": {
        "min": 5,
        "max": 20
      }
    }
  ]</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>result3 = [
    {
      "groupName": "Group 2",
      "id": "Brand",
      "name": "brand2",
    },
    {
      "groupName": "Group 3",
      "id": "Price",
      "min": 5,
      "max": 20
    }
  ]</code></pre>
  </div>
  </div>
  </p>
  <p>I want to use reduce to get these above (result1, result2 &amp; result3) solutions. Could someone help me with this?</p>
  <p><strong>Edited</strong> to check scenario where two are selected in the same group, solution resulting in result1.</p>