將項目添加到對象中的數組

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>

文件1.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();

文件2.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' ]
},

我不明白為什么要添加新對象而不是將其推送到存在的分類法的術語數組。

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>