[英]Add items to array in object
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:这是它现在的样子:
<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文件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();
File2.js文件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();
}
}
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.我不明白为什么要添加新对象而不是将其推送到存在的分类法的术语数组。
I created a workable example of your code, but changed the let tax = $(this).attr('id')
to let tax = $(this).attr('name');
我为您的代码创建了一个可行的示例,但将
let tax = $(this).attr('id')
更改为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); };
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.