# Showing results count on CMS Filters on load

**URL:** <https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406>\
**Category:** General\
**Created:** [January 22, 2024, 3:34pm UTC](https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406 "2024-01-22T15:34:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![barrybaris](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/barrybaris/32/227_2.png) [@barrybaris](https://forum.finsweet.com/u/barrybaris)\
**Post date:** [January 22, 2024, 3:34pm UTC](https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406/1 "2024-01-22T15:34:47Z")

</div>

Hi Finsweeters,

I’ve got two projects coming up and was wondering if this feature would be possible with attributes.

As we know we can filter and show result counts on a CMS list when a filter is active/selected, but would it be also possible to display current count of a filter without any interaction.

I guess you would get it better when you look at my design. I would like to implement the counts next my filters to display how many blog items they have each when they are also not active/selected.

Thanks a lot!

 ![Screenshot 2024-01-22 at 16.34.15](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/7/7d5d261eaa42de1515d59da17d5dfb4d99f5ccdc.png)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 22, 2024, 4:22pm UTC](https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406/2 "2024-01-22T16:22:48Z")

</div>

hey @barrybaris! This can be achieved with the [CMS Filter API](https://finsweet.com/attributes/api/cms-filter). Here is an example code I’ve shared before to displays the number of items corresponding to each filter once the list loads

```js
<script>
  setTimeout(function () {
    window.fsAttributes = window.fsAttributes || [];
    window.fsAttributes.push([
      'cmsfilter',
      function (filterInstances) {
        const [filterInstance] = filterInstances;
        const filtersData = filterInstance.filtersData;
        let resultsArray = [];

        filtersData.forEach(function (element) {
          const elements = element.elements;
          elements.forEach(function (element) {
            let filterValue = element.value;
            let resultsNumber = element.resultsCount;
            resultsArray.push({ filterName: filterValue, filterResults: resultsNumber });
          });
        });

        resultsArray.forEach(function (filter) {
          let elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
            function (element) {
              return element.textContent.trim() === filter.filterName;
            }
          );

          elements.forEach(function (element) {
            let resultsTextElement = element.nextElementSibling ? element.nextElementSibling : null;
            if (resultsTextElement) {
              resultsTextElement.textContent = filter.filterResults;
            }
          });
        });
      },
    ]);
  }, 2500);
</script>

```

This result doesn’t get updated when the filters are applied to the list. But I can easily add this functionality if you need me to.

Please share a link to your page and I’ll modify the code for your use case 💪

---

<div class="post-metadata">

**Author:** ![barrybaris](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/barrybaris/32/227_2.png) [@barrybaris](https://forum.finsweet.com/u/barrybaris)\
**Post date:** [January 22, 2024, 4:56pm UTC](https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406/3 "2024-01-22T16:56:45Z")

</div>

Hi @Support-Luis thanks a lot for the quick response!

Here you go [preview link](https://preview.webflow.com/preview/strategie-austria?utm_medium=preview_link&utm_source=designer&utm_content=strategie-austria&preview=c675f0ca450c5e93ded7250e0dc02b79&pageId=65ad3c846d1cea57366f6040&workflow=preview)

[https://strategie-austria.webflow.io/blog](https://strategie-austria.webflow.io/blog)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 22, 2024, 5:37pm UTC](https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406/4 "2024-01-22T17:37:51Z")

</div>

Hey @barrybaris! What is the functionality you are after? The code above should work as is with your current setup. Remember the code will not update when the filters are applied.

You can use this code if you want the result count numbers to be updated on each filter

```js
<script>
      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsfilter',
        (filterInstances) => {
          const [filterInstance] = filterInstances;
          const filtersData = filterInstance.filtersData;
          let resultsArray = [];

          function updateItemCount() {
            filtersData.forEach(function (element) {
              const elements = element.elements;
              elements.forEach(function (element) {
                let filterValue = element.value;
                let resultsNumber = element.resultsCount;
                resultsArray.push({ filterName: filterValue, filterResults: resultsNumber });
              });
            });

            resultsArray.forEach(function (filter) {
              let elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
                function (element) {
                  return element.textContent.trim() === filter.filterName;
                }
              );

              elements.forEach(function (element) {
                let resultsTextElement = element.nextElementSibling
                  ? element.nextElementSibling
                  : null;
                if (resultsTextElement) {
                  resultsTextElement.textContent = filter.filterResults;
                }
              });
            });
          }

          updateItemCount();

          filterInstance.listInstance.on('renderitems', (renderedItems) => {
            console.log(renderedItems);
            updateItemCount();
          });
        },
      ]);
    </script>

```

---

<div class="post-metadata">

**Author:** ![barrybaris](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/barrybaris/32/227_2.png) [@barrybaris](https://forum.finsweet.com/u/barrybaris)\
**Post date:** [January 25, 2024, 2:55pm UTC](https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406/5 "2024-01-25T14:55:53Z")

</div>

Hey @Support-Luis exactly like the first code which works perfect but there is a short delay when it loads. The second code has no delay but the function is not what I’m after. The results shouldn’t update when the filters are active

[https://strategie-austria.webflow.io/blog](https://strategie-austria.webflow.io/blog)

You can see here that the results are showing after 3-4 Seconds.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [January 25, 2024, 7:26pm UTC](https://forum.finsweet.com/t/showing-results-count-on-cms-filters-on-load/2406/6 "2024-01-25T19:26:04Z")

</div>

Hey @barrybaris! To avoid the filters from updating you can just remove this part from the code

```js
filterInstance.listInstance.on('renderitems', (renderedItems) => {
            console.log(renderedItems);
            updateItemCount();
          });

```

Without this, the numbers will always show the same amount.