swagger-nesting.js

function selectListing(name) {
  return document.querySelector(`h3[data-tag="${name}"]`);
}

const items = document.querySelectorAll(".opblock-tag-section > h3 > a > span");
let paths = [];

for (const { textContent } of items) {
  paths.push(textContent);
}

const nestedArray = {};
for (const path of paths) {
  const parts = path.split(" / ");

  let fullPath = "";
  let currentLevel = nestedArray;

  for (let i = 0; i < parts.length; i++) {
    const part = parts[i];
    fullPath = fullPath ? `${fullPath} / ${part}` : part;

    if (!currentLevel[part]) {
      currentLevel[part] = {
        fullPath: fullPath,
        children: {},
      };
    }
    currentLevel = currentLevel[part].children;
  }
}

function processNestedObject(obj, parentEl = null) {
  for (const [key, val] of Object.entries(obj)) {
    const currentEl = selectListing(val.fullPath);

    if (!currentEl) {
      console.warn(`Element with data-tag="${val.fullPath}" not found`);
      continue;
    }

    if (parentEl) {
      let ul = parentEl.nextElementSibling;

      if (!ul || ul.tagName !== "UL") {
        ul = document.createElement("div");
        parentEl.insertAdjacentElement("afterend", ul);
      }

      const currentListing = selectListing(val.fullPath);

      const liPar = document.createElement("details");

      const liSum = document.createElement("summary");
      liSum.style.cursor = "pointer";
      liSum.style.fontWeight = "bold";
      liSum.style.fontSize = "1.2rem";
      liSum.style.marginBottom = "5px";

      liSum.innerHTML = `<h4 class="nested-heading">${key}</h4>`;

      currentListing.innerHTML = "";

      const li = currentListing.parentElement;
      liPar.append(liSum);
      liPar.append(li);

      // remove border element
      li.children[0].remove();

      li.className += " nested-items";

      ul.appendChild(liPar);

      if (Object.keys(val.children).length > 0) {
        processNestedObject(val.children, li);
      }
    } else {
      if (Object.keys(val.children).length > 0) {
        processNestedObject(val.children, currentEl);
      }
    }
  }
}

processNestedObject(nestedArray);

const styles = document.createElement("style");
styles.innerHTML = `
.nested-heading {
  display: inline;
}

details {
  padding-left: 1rem;
}

summary::marker {
  display: none;
}

summary {
  padding: 1rem;
  border-bottom: #ccc 1px solid;

}
`;

document.body.append(styles);