Generate URL to dynamically filtered results

Question

With the help of the SO commuinity I have managed to create a Javascript filtered list. What I would like to know is if it is possible to adapt what I have to enabled the direct linking to a filtered result. So all the filtering happens without leaving the page, which is great, however, I will need the ability to append the url so that I can navigate directly to a list of filtered results.

Here is my current JS:

const items = Array.from(document.querySelector(".artists-container").children)

const onClick = function() {
    buttons.forEach((button) => { button.classList.remove("active") })
    this.classList.add("active")
    const target = this.getAttribute("data-target")

    items.forEach((item) => { item.style.display = "none" })
    items.filter(item => item.getAttribute("data-discipline").indexOf(target) >= 0 || target == "artists").forEach((item) => { item.style.display = "block" })
}

buttons.forEach((button) => { button.addEventListener("click", onClick) })

and here is my HTML:

    <div class="filter-btn">
        <ul id="buttons">
            <li class="active" data-target="artists">All</li>
            <li data-target="category1">Category 1</li>
            <li data-target="category2">Category 2</li>
            <li data-target="category3">Category 2</li>
        </ul>
    </div>

    <div class="artists-container">
        <article data-discipline="category1 category2">
            <a href="#">
                <div class="artist-details">
                    <p>Category 1, Category 2</p>
                    <h5>I appear in two categories</h5>
                </div>
            </a>
        </article>

        <article data-discipline="category3">
            <a href="#">     
                <div class="artist-details">
                    <p>Category 3</p>
                    <h5>I appear in one category</h5>
                </div>
            </a>
        </article>

Any help would massively be appreciated :)

Thanks

Yes, it is possible. Encode the information into the URL. When the page loads, decode the information from the URL (if present) and run the filtering code. — Heretic Monkey, Jun 15 '20 at 19:37
See, for example, the answers to [How to use JavaScript to fill a form on another page](https://stackoverflow.com/q/12183572/215552) — Heretic Monkey, Jun 15 '20 at 19:43

score 0 · Answer 1 · answered Jun 15 '20 at 21:04

A friend helped me out and I figured i'd post it here in case it might help others...

const buttons = Array.from(document.querySelector("#buttons").children)
const items = Array.from(document.querySelector(".artists-container").children)

function filterByCategory(category) {
  buttons.forEach((button) => { button.classList.remove("active") })
  buttons.filter(button => button.getAttribute("data-target") == category).forEach((button) => { button.classList.add("active") })

  items.forEach((item) => { item.style.display = "none" })
  items.filter(item => item.getAttribute("data-discipline").indexOf(category) >= 0 || category == "artists").forEach((item) => { item.style.display = "block" })
}

const onClick = function() {
    const category = this.getAttribute("data-target")
    filterByCategory(category)
}

buttons.forEach((button) => { button.addEventListener("click", onClick) })

if (window.location.hash.length > 1) {
  filterByCategory(window.location.hash.substring(1))
}

Generate URL to dynamically filtered results

1 Answers1