CODEWITHSUNDEEP
javascriptjquery
Pavel Nasonov
Pavel Nasonov

Reputation: 61

Js dynamic object with dynamic arrays

Hi I am creating dynamic filter like this

Filter 1 --property 1 --property 2 --property 3

Filter 2 --property 1 --property 2 --property 3

Thats the code

    var js_filter = {};
    var creators_cat = [];

    $('.filter-item input').on('change',function (e) {
        var filter_type = $(this).attr('name');
        var filter_term = $(this).val();
        creators_cat.push( filter_term );
        js_filter["'"+filter_type+"'"] = creators_cat;
        console.log(js_filter);
    })

and that's a response I get

{'filter-product_cat[]': Array(4), 'filter-brands': Array(4)}
'filter-brands': (4) ['32', '29', '23', '36']
'filter-product_cat[]': (4) ['32', '29', '23', '36']
[[Prototype]]: Object

as you can see array keys are dynamically added but values are the same for both of the keys.

An I need to add these separately. Been looking for answer for quiet some time and didn't find something similar.

Would appreciate any help.

Upvotes: 0

Views: 33

Answers (1)

Barmar
Barmar

Reputation: 780974

You shouldn't be pushing onto a global array. Each filter input should have its own array of values.

Check if there's already an element of the js_filter object for the current filter_type. If not, create it as an empty array. Then push the current value onto the array.

$('.filter-item input').on('change', function(e) {
  var filter_type = $(this).attr('name');
  var filter_term = $(this).val();
  if (!js_filter[filter_type]) {
    js_filter[filter_type] = [];
  }
  js_filter[filter_type].push(filter_term);
  console.log(js_filter);
})

Upvotes: 1

Related Questions