JSFiddle - React, Tailwind, and code Playground

by JeffC

JavaScript

// validate primary/secondary categories, product name, and facets
// after the first 3, the rest are in pairs <facet> <X>
// break it down to home, primary, secondary, and then array of facets... facet.name and facet.remove

var breadcrumb = {
    home: "",
    primaryCategory: "",
    secondaryCategory: "",
    productName: "",
    facetNames: [],
    facetCloseButtons: []
};

var a = document.getElementById("breadCrumb").getElementsByTagName("a");
console.log(a.length);
switch (a.length)
{
    case 17:
        breadcrumb.facetNames.push(a[15].innerText);
        breadcrumb.facetCloseButtons.push(a[16]);
    case 15:
        breadcrumb.facetNames.push(a[13].innerText);
        breadcrumb.facetCloseButtons.push(a[14]);
    case 13:
        breadcrumb.facetNames.push(a[11].innerText);
        breadcrumb.facetCloseButtons.push(a[12]);
    case 11:
        breadcrumb.facetNames.push(a[9].innerText);
        breadcrumb.facetCloseButtons.push(a[10]);
    case 9:
        breadcrumb.facetNames.push(a[7].innerText);
        breadcrumb.facetCloseButtons.push(a[8]);
    case 7:
        breadcrumb.facetNames.push(a[5].innerText);
        breadcrumb.facetCloseButtons.push(a[6]);
    case 5:
        breadcrumb.facetNames.push(a[3].innerText);
        breadcrumb.facetCloseButtons.push(a[4]);
    case 4:
        breadcrumb.productName = a[3].innerText;
    case 3:
        breadcrumb.secondaryCategory = a[2].innerText;
    case 2:
        breadcrumb.primaryCategory = a[1].innerText;
    case 1:
        breadcrumb.home = a[0].innerText;
        break;
    default:
        console.log("Unexpected number of elements in the breadcrumb.");
}

breadcrumb;