将项添加到对象中的数组

Question

我有一堆表示过滤器的复选框，所以当单击一个复选框时，它应该向过滤器数组添加一个包含过滤器类型(分类法)和值(术语)的对象。

当单击复选框时，它首先添加一个包含分类法和术语属性的新对象。到目前为止，这是可行的。问题是，当我单击第三个具有已经存在的分类值的复选框时，它会向数组中添加一个全新的对象，而不是将术语添加到已经存在的术语数组中。

现在看起来是这样的：

<input type="checkbox" id="term-1" value="term-1" name="taxonomy-1">
<label for="term-1">Term 1</label>

<input type="checkbox" id="term-2" value="term-2" name="taxonomy-1">
<label for="term-2">Term 2</label>

<input type="checkbox" id="term-3" value="term-3" name="taxonomy-1">
<label for="term-3">Term 3</label>

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();
    }
}

因此，第一次单击复选框可以正常工作，结果将是：

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

第二次单击：

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

但是第三次点击的结果是：

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

我不明白为什么要添加一个新对象，而不是将它推入现有分类的terms数组。

Answer 1

我为您的代码创建了一个可行的示例，但将let tax = $(this).attr('id')更改为let tax = $(this).attr('name');。

到目前为止，一切都如您所愿，术语被添加到现有对象，而不是正在创建的新对象：

​

$('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);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="term-1" value="term-1" name="taxonomy-1">
<label for="term-1">Term 1</label>

<input type="checkbox" id="term-2" value="term-2" name="taxonomy-1">
<label for="term-2">Term 2</label>

<input type="checkbox" id="term-3" value="term-3" name="taxonomy-1">
<label for="term-3">Term 3</label>

<pre id="output"></pre>

​