jQuery loop to put together multiple arrays - Mapbox map.setFilter()

Question

Mapbox's new GL API is proving difficult to use. I'm wondering if I can build an array with this strange format through jQuery's each function.

I'm creating a form with checkboxes for categories that would filter the markers shown on the map. I'm using a $.each() loop to grab the checked inputs, get their ID, and throw it in the middle of each array. One checked input is one array.

Basically, I need the array to be put together as such:

map.setFilter('markers', ["any",
   ['in',c1,true],
   ['in',c2,true], // these 3 arrays
   ['in',c3,true]
] );

But obviously, I need this done dynamically on check. Here's the incomplete jQuery I'd like to use:

jQuery('input.checkbox-child').change(function(){
    args = new Array();
    jQuery('input.checkbox:checked').each(function(){
        id = jQuery(this).attr('id');
        filter = ['in',id,true];
        // ???
    });
    map.setFilter('markers', ["any", args] );

});

Not sure how I would join the filter variables together to form a comma-separated list of arrays, similar to ['in',id,true],['in',id,true],['in',id,true]... for use in the setFilter function.

score 1 · Accepted Answer · answered Dec 09 '15 at 22:06

I think this should work for what you want

var args = [];
jQuery('input.checkbox-child').change(function(){
    jQuery('input.checkbox:checked').each(function(){
        var id = jQuery(this).attr('id');
        var filter = ['in',id,true];
        args.push(filter);
    });
    map.setFilter('markers', ["any"].concat(args));
});

jQuery loop to put together multiple arrays - Mapbox map.setFilter()

1 Answers1