Add items to array in object

Question

I have a bunch of checkboxes that represent filters, so when clicking a checkbox it should add an object containing the type of filter (taxonomy) and the value (terms) to a filter array.

When clicking the checkbox it first adds a new object containing a taxonomy and terms property. So far this works. The problem is when i click a third checkbox that has an taxonomy value that already exists, it adds a whole new object to the array instead of adding the term to the already existing term array.

This is what it looks like right now:


Term 1


Term 2


Term 3

File1.js

import FilterModule from '../helpers/filter-module';

class View {
    constructor() {
        self.filterModule = new FilterModule();
        this.$filters = $( '[data-filters]' );
    }
    
    // Called after api got data
    update() {
        // Set event listener for select(s)
        this.$filters.find( 'select' ).on( 'change', this.handleFiltering );
        this.$filters.find( 'input[type="checkbox"]' ).on( 'change', this.handleFiltering );
    }

    handleFiltering() {
        let tax = $( this ).attr( 'name' );
        const term = $( this ).val();
        self.filterModule.handleCheckbox( $( this ), tax, term );
    }
}

export default new View();

File2.js

import Api from '../helpers/api';

export default class FilterModule {
    handleCheckbox( checkbox, tax, term ) {
        const filters = Api.response.filters.active_filters;

        if ( $( checkbox ).is( ':checked' ) ) {

            // Check if taxonomy exists, if not, add it
            const index = filters.findIndex( x => x.taxonomy === tax );
            if ( index === -1 ) {
                console.log( 'does not exist, add new taxonomy object' );

                // Add new selection
                filters.push( {
                    taxonomy: tax,
                    terms: [ term ]
                } );
            } else {
                console.log( 'tax exists, push new term into it' );
                filters.find( x => x.taxonomy === tax ).terms.push( term );
            }

            console.log( filters );

        }

        // Update data
        this.update();
    }

    update() {
        Api.fetch();
    }
}

So the first checkboxes click works well, the result would be:

{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-1' ]
}

Second click:

{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-1', 'term-2' ]
}

But the third click results in:

{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-1', 'term-2' ]
},
{
   taxonomy: 'taxonomy-1',
   terms: [ 'term-3' ]
},

I don't understand why a new object is added instead of pushing it to the terms array of the taxonomy that exists.

user_4992594 · Answer

I created a workable example of your code, but changed the let tax = $(this).attr('id') to let tax = $(this).attr('name');.

So far, everything works as you expect, terms are added to the existing object instead of a new object being created:

$('input[type="checkbox"]').on('change', this.handleFiltering);

const activeFilters = [];

function handleFiltering() {
    let tax = $(this).attr('name');
    const term = $(this).val();

    handleCheckbox($(this), tax, term);
}


function handleCheckbox(checkbox, tax, term) {

    // activeFilters represents an array
    if ($(checkbox).is(':checked')) {

        // Check if taxonomy exists, if not, add it
        const index = activeFilters.findIndex(x => x.taxonomy === tax);
        if (index === -1) {
            console.log('does not exist, add new object');

            // Add new selection
            activeFilters.push({
                taxonomy: tax,
                terms: [term]
            });
        } else {
            console.log('tax exists, push new term into it');
            activeFilters.find(x => x.taxonomy === tax).terms.push(term);
        }

    }
    
    output.innerHTML = JSON.stringify(activeFilters, null, 2);
};



Term 1


Term 2


Term 3

Add items to array in object

1 Answers