Unable to filter a set of data for URL filtering

Question

Unable to filter a set of data for URL filtering

44 views Asked by Kanthesh Mallesh At 06 January 2025 at 10:16

I have built a code that filters the data until the first occurrence. After that, it is returning all sequential data which not required. Can you please help me with the approach to solve this!!

filter URL is localdirector/index.html?filter=code2. The value to be returned only code2. but for me, code3 is also returning. Can anyone please help me with it!!

<html>

<body>

<ul class="portfolio-filters list-inline">
  <li class="filter active code1" data-filter="all">code1</li>
  <li class="filter code2" data-filter="webdesign">code2</li>
  <li class="filter code3" data-filter="responsive">code3</li>
  <li class="filter code4" data-filter="wordpress">code4</li>
</ul>

<script>
const url = new URL(window.location.href)
const currentFilter = url.searchParams.get('filter')

if (currentFilter != null) {

  const collection = document.getElementsByClassName('filter')

  for (let item of collection) {
    if (item.classList.contains(currentFilter)) {
      item.style.display = 'block'
      break
    }

    item.style.display = 'none'
  }
}</script>


 
</body>
</html>

Original Q&A

There are 1 answers

**epascarello** · Answer 1 · 2020-08-28T17:37:21+00:00

You exit the loop so the ones after it do not run

// const url = new URL(window.location.href)
const url = new URL('http://www.exaple.com/index.html?filter=code2')
const currentFilter = url.searchParams.get('filter')

if (currentFilter != null) {

  const collection = document.getElementsByClassName('filter')

  for (let item of collection) {
    if (item.classList.contains(currentFilter)) {
      item.style.display = 'block'
    } else {
      item.style.display = 'none'
    }
  }
}

<ul class="portfolio-filters list-inline">
  <li class="filter active code1" data-filter="all">code1</li>
  <li class="filter code2" data-filter="webdesign">code2</li>
  <li class="filter code3" data-filter="responsive">code3</li>
  <li class="filter code4" data-filter="wordpress">code4</li>
</ul>

You can just do it with a selector instead of a loop

// const url = new URL(window.location.href)
const url = new URL('http://www.exaple.com/index.html?filter=code2')
const currentFilter = url.searchParams.get('filter') || 'code1';

document.querySelector(`.filter.${currentFilter}`).classList.add('active');

.filter {
  display: none;
}

.filter.active {
  display: block;
}

<ul class="portfolio-filters list-inline">
  <li class="filter code1" data-filter="all">code1</li>
  <li class="filter code2" data-filter="webdesign">code2</li>
  <li class="filter code3" data-filter="responsive">code3</li>
  <li class="filter code4" data-filter="wordpress">code4</li>
</ul>

TechQA.

Unable to filter a set of data for URL filtering

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in DOM

Popular Questions

Popular Tags

Trending Questions