Echoing Multiple Category IDs with Expression Engine

Question

I am building a page that will on page load list all entries in a specific channel just like any other page. The trick here is that the page will be filterable but with just JavaScript/Jquery allowing the user to filter without refreshing the page.

I am filtering by using data tags on the <li> elements and then manipulating the DOM based on which category/id was chosen. However, for some entries they have multiple selections within a category group and therefore the data tag ends up having only one id, whichever comes first in the category fields table.

My question here is, is it possible to echo multiple ids into a data tag using EE in its base form or will I need to find/create a custom plug-in in order to do this?

{exp:channel:entries channel="page-work-project" status="open"}
    <li {categories show_group="4"}data-category="{category_id "{/categories}>
        <a href="{url_title}">
            <div class="detail">
                <h4>{title}</h4>
            </div>
        </a>
    </li>
{/exp:channel:entries}

Answer 1

The issue here is that {categories show_group="4"}data-category="{category_id "{/categories} acts as for loop on it's own. So the code that it's rendering is actually <li data-category="id1" data-category="id2" data-category="id3">, which is not valid html.

Instead you should put the {categories} tag within the data attribute like this:

data-category="{categories show_group="4"} {category_id}- {/categories}"