时间戳

首页 > 解决方案 > 将项目添加到对象中的数组

javascript - 将项目添加到对象中的数组

问题描述

我有一堆代表过滤器的复选框，所以当单击一个复选框时，它应该将一个包含过滤器类型（分类）和值（术语）的对象添加到过滤器数组中。

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

这就是它现在的样子：

<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' ]
},

我不明白为什么要添加一个新对象而不是将其推送到存在的分类法的术语数组中。

标签： javascript

解决方案

我为您的代码创建了一个可行的示例，但将其更改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>

推荐阅读