JSFiddle - React, Tailwind, and code Playground

by vaheed akhtar

HTML

<ul id="items">
 <li id="item1">1.Item</li>
  <li id="item2">1.Item</li>
   <li id="item3">1.Item</li>
</ul>

JavaScript

document.querySelector('#items').addEventListener('click', (e)=> {
   console.log(e.target.id);
})

let data = [
      {
        "filterTitle": "Header 1",
        "filterData": [
          {
            "key": "Menu1",
            "value": "m1",
            "count": 1,
            "isChecked": true
          }
        ]
      },
      {
        "filterTitle": "Header 2",
        "filterData": [
          {
            "key": "2header2",
            "value": "Sub item1 in header 2",
            "count": 1,
            "isChecked": true
          }
        ]
      },
      {
        "filterTitle": "Header 3",
        "filterData": [
          {
            "key": "3header3",
            "value": "Sub item1 in header 3",
            "count": 1,
            "isChecked": false
          }
        ]
      },
      {
        "filterTitle": "Header 4",
        "filterData": [
          {
            "key": "4header4",
            "value": "Sub item1 in header 4",
            "count": 1,
            "isChecked": true
          },
          {
            "key": "4header4",
            "value": "Sub item2 in header 4",
            "count": 11,
            "isChecked": true
          }
        ]
      }
    ];
  let synced = [];
  let result =  data.map(service=> {
    let res = [];
    service.filterData.forEach(ser =>{
      if(ser.isChecked) {
   res.push({filterTitle: service.filterTitle, value: ser.key});
      }
    })
    return res;  
  });
    console.log(result.flat(Infinity))