The goal is to extract the header text, item text, item color, and header icon name from the given HTML structure and organize them into a JSON object

extract-json-from-html-sample.js

const html = `
<div class="ui floating dropdown labeled icon button">
  <i class="cloud upload icon"></i>
  <span class="text">API Action</span>
  <div class="menu">
    <div class="ui icon search input">
      <i class="search icon"></i>
      <input type="text" placeholder="Search menu...">
    </div>
    <div class="scrolling menu">
    <div class="header">
      <i class="tags icon"></i>
      Unavailable Codes
    </div>
      <div class="item">
        <div class="ui red empty circular label"></div>
        Important
      </div>
      <div class="item">
        <div class="ui red empty circular label"></div>
        Announcement
      </div>
      <div class="item">
        <div class="ui red empty circular label"></div>
        Cannot Fix
      </div>
    <div class="header">
      <i class="tags icon"></i>
      Hours of Operation
    </div>
      <div class="item">
        <div class="ui purple empty circular label"></div>
        News
      </div>
      <div class="item">
        <div class="ui purple empty circular label"></div>
        Enhancement
      </div>
      <div class="item">
        <div class="ui purple empty circular label"></div>
        Change Declined
      </div>
      <div class="item">
        <div class="ui purple empty circular label"></div>
        Off Topic
      </div>
    <div class="header">
      <i class="tags icon"></i>
      Users
    </div>
      <div class="item">
        <div class="ui green empty circular label"></div>
        Interesting
      </div>
      <div class="item">
        <div class="ui green empty circular label"></div>
        Discussion
      </div>
    </div>
  </div>
</div>
`;

const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');

const headerElements = doc.querySelectorAll('.header');
const jsonObject = [];

headerElements.forEach((headerElement) => {
  const iconElement = headerElement.querySelector('i');
  const iconClass = iconElement.classList[0];
  const iconName = iconClass.split(' ')[0];
  const headerText = headerElement.textContent.trim();
  const itemElements = [];

  let sibling = headerElement.nextElementSibling;
  while (sibling && !sibling.classList.contains('header')) {
    if (sibling.classList.contains('item')) {
      itemElements.push(sibling);
    }
    sibling = sibling.nextElementSibling;
  }

  const items = itemElements.map((itemElement) => {
    const itemText = itemElement.textContent.trim();
    const itemColor = itemElement.querySelector('.empty.circular.label').classList[1];

    return {
      itemText: itemText,
      itemColor: itemColor,
    };
  });

  const headerObj = {
    headerText: headerText,
    headerIcon: iconName,
    items: items,
  };

  jsonObject.push(headerObj);
});

const jsonString = JSON.stringify(jsonObject, null, 2);
console.log(jsonString);

// RESULT
// [
//   {
//     "headerText": "Unavailable Codes",
//     "headerIcon": "tags",
//     "items": [
//       {
//         "itemText": "Important",
//         "itemColor": "red"
//       },
//       {
//         "itemText": "Announcement",
//         "itemColor": "red"
//       },
//       {
//         "itemText": "Cannot Fix",
//         "itemColor": "red"
//       }
//     ]
//   },
//   {
//     "headerText": "Hours of Operation",
//     "headerIcon": "tags",
//     "items": [
//       {
//         "itemText": "News",
//         "itemColor": "purple"
//       },
//       {
//         "itemText": "Enhancement",
//         "itemColor": "purple"
//       },
//       {
//         "itemText": "Change Declined",
//         "itemColor": "purple"
//       },
//       {
//         "itemText": "Off Topic",
//         "itemColor": "purple"
//       }
//     ]
//   },
//   {
//     "headerText": "Users",
//     "headerIcon": "tags",
//     "items": [
//       {
//         "itemText": "Interesting",
//         "itemColor": "green"
//       },
//       {
//         "itemText": "Discussion",
//         "itemColor": "green"
//       }
//     ]
//   }
// ]