Get key and values in an object and out put it to be used as parameter

Question

I'm using filterify (http://luis-almeida.github.io/filtrify/) plugin to filter some divs. Now what i'm trying to do is get the data attributes from a element and match it with the target div element.

When I enter the values manually it works fine, example, ft.trigger({ type : ["red"] } but when i'm trying to make it dynamic and mix it with variables that's where it fails.

My script look something like this:

$(function(){ 


    var ft = $.filtrify("boxes");


    $("#filter_nav a").click(function(e) {

        e.preventDefault();

        // coding the values manually works
        // ft.trigger({ type : ["red"] }


        var customData = $(this).data()

        for (var key in customData) {

            ft.trigger({ key : [customData[key]] });
            // should return something like ft.trigger({ type : ["red"] });

        }

    });


});

HTML

<ul id="filter_nav">
    <li><a href="#" data-type='red' >Red</a></li>
    <li><a href="#" data-type='yellow' >Yellow</a></li>
    <li><a href="#" data-type='blue' >Blue</a></li>
    <li><a href="#" data-type='green' >Green</a></li>

    <li><a href="#" data-progress='20' >20</a></li>
    <li><a href="#" data-progress='40' >40</a></li>
    <li><a href="#" data-progress='60' >60</a></li>
    <li><a href="#" data-progress='80' >80</a></li>

</ul>

<div id="boxes">

    <div data-type='red' data-progress='20' class="box red"></div>
    <div data-type='yellow' data-progress='40' class="box yellow"></div>
    <div data-type='blue' data-progress='60' class="box blue"></div>
    <div data-type='red' data-progress='20' class="box red"></div>
    <div data-type='green' data-progress='80' class="box green"></div>
    <div data-type='yellow' data-progress='40' class="box yellow"></div>
    <div data-type='blue' data-progress='60' class="box blue"></div>
    <div data-type='red' data-progress='20' class="box red"></div>


</div>

I'm suspecting that my setup here is wrong

ft.trigger({ key : [customData[key]] });

more about trigger method: http://luis-almeida.github.io/filtrify/trigger.html

Can you help me?

Thank You!

Answer 1

The argument to the trigger method is a json like the following (the one you mention that manually works):

{ type : ["red"] }

You want to create that json from the data attributes. The json will have a property with name type, the name of the property coming from the data attribute name and the value ["red"] would be an array with a single element coming from the data attribute value.

You were getting the value right, but the property name of the json would always be key instead of type or progress. You can pass the arguments to trigger in the following way:

for (var key in customData) {
    var triggerOptions = {};
    triggerOptions[key] = [customData[key]];            
    ft.trigger(triggerOptions);        
}

Basically, you have to create the object first and then create the new properties in the object using the square bracket notation

Answer 2

well you say that you expect something like...

should return something like ft.trigger({ type : ["red"] });

but your code returns

ft.trigger({ key : ["red"] })

maybe your key has the wrong name