使用Javascript比较（过滤）动态数组中的多个数组值

Question

I like to filter out static array values from another array that values change dynamically on click and base on that create new temp array. I am not sure how to do this without doing a bunch of if statements or switch statements which I dont want to. I am sure there is more efficient way of doing it.

For example I got this static array:

0:[
    ['productFilters',
        ['productCat', 'Bottle'],
        ['productType', 'Double wall airless pump'],
        ['productMaterial', 'PP'],
        ['productSizesMl', '10, 15, 60'],
        ['productSizesOz', '0.12, 0.18, 0.32']
    ]
],
1:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Round Tube'],
        ['productMaterial', 'LDPE'],
        ['productSizesMl', '105, 260'],
        ['productSizesOz', '0.55, 12.17']
    ]
],
2:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Airless'],
        ['productMaterial', 'LDPE, PP'],
        ['productSizesMl', '60, 70'],
        ['productSizesOz', '0.32, 0.38']
    ]
]

And then we got this dynamic array that values can change on clicks and even can be empty.

[               
    ['productCat', 'Tube'], 
    ['productType', 'Airless'], 
    ['productMaterial', 'PP'], 
    ['productSizesMl', '60'],
    ['productSizesOz', '0.32']
];

Base on these examples I would like to compare the two arrays and filter them out. On this, I would only get the 2nd array back after filtering since basically all the values from the dynamic array match even when static array has, for example, multiple values like "productSizesMl" does it will still find that "60". Then create from it a new temp array.

I have created 2 arrays, one to filter out ProductCat, so it if you clicked on Tube only two items(1,2) will be returned from my static array into my new temp array. Which works fine.

My first loop:

for ( p=0; p < newResults.length; p++ ) {
    if (newResults[p][0][1] == thisCat) {
      tempProArray[p] = newResults[p];
  }
}

Then I have another array, to filter out my new temp array even further, which works for the second filter if clicked on.

Second temp array:

for ( f=0; f < tempProArray.length; f++ ) {
  newResult = tempProArray[f][1];
  for ( k=0; k < newResult[k].length; k++ ) {
      if (filterArray[k][1] !== 'none') {
        if (newResult[k][1].indexOf(filterArray[k][1]) > -1) {
          tempFilterArray[f] = tempProArray[f];
        }
      }
  } 
}

filterArray array is my dynamic array that changes values. Basically, when I click on for example filter Type-> Airless, it returns last value from my first temp array and from it I create another temp array which has only one item in it. Below is my second temp array

0:[
    ['productFilters',
        ['productCat', 'Tube'],
        ['productType', 'Airless'],
        ['productMaterial', 'LDPE, PP'],
        ['productSizesMl', '60, 70'],
        ['productSizesOz', '0.32, 0.38']
    ]
]

The problem I have is when I click on different filter for example material and choose LDPE. Instead of only filtering out that one item that I have in second temp array, it goes through and filters out through all 2 items that have 'productCat' value of Tube and then it returns 2 items since both have 'productMaterial' value of LDPE.

Answer 1

For a faster access and without to much nesting iterations, I suggest to build out of an proruct an object with the splitted values, if an ', ' is found, because I would not rely on the order and that all attributes are given of a product or in filter in exactly the same order.

Then you could just filter the array by checking all given filter values against a singel value of the product.

 var data = [[['productFilters', ['productCat', 'Bottle'], ['productType', 'Double wall airless pump'], ['productMaterial', 'PP'], ['productSizesMl', '10, 15, 60'], ['productSizesOz', '0.12, 0.18, 0.32']]], [['productFilters', ['productCat', 'Tube'], ['productType', 'Round Tube'], ['productMaterial', 'LDPE'], ['productSizesMl', '105, 260'], ['productSizesOz', '0.55, 12.17']]], [['productFilters', ['productCat', 'Tube'], ['productType', 'Airless'], ['productMaterial', 'LDPE, PP'], ['productSizesMl', '60, 70'], ['productSizesOz', '0.32, 0.38']]]], filters = [['productCat', 'Tube'], ['productType', 'Airless'], ['productMaterial', 'PP'], ['productSizesMl', '60'], ['productSizesOz', '0.32']], result = data.filter(([p]) => { var product = Object.create(null); p.slice(1).forEach(([key, value]) => product[key] = value.split(', ')); return filters.every(([key, value]) => product[key].includes(value)); }); console.log(result);

 .as-console-wrapper { max-height: 100% !important; top: 0; }

Needless to say, a good data structure without nested arrays could make the development easier.