Algorithm to disable unnecessary values in an array

Question

to make things clear... I want to explain the basis first.

I have a PRODUCT.
a PRODUCT has different VARIANTS (id, code, price).
VARIANTS have ATTRIBUTES (id, type[select, radio], name).
ATTRIBUTES have VALUES (id, label).

I have a REACT APP to handle variant selecting in product detail (where u add the product into the cart).

It's functioning is this: All attributes are printed by ID and their selecting html input type is made according to their type (I've specified above).

So... WHAT I WANT TO ACCOMPLISH is THIS.

EXAMPLE:

I have 2 attributes: COLOR, SIZE. COLOR has 2 values: WHITE, BLACK. SIZE HAS 3 VALUES: M, L, S.

Product "A" has 2 variants: #1 VARIANT - COLOR: WHITE; SIZE: M #2 VARIANT - COLOR: BLACK; SIZE: L,

in a react APP.. I want to filter out ALL options that aren't available to select an existing variant. User CAN NOT select COLOR WHITE; SIZE L variant because it doesn't exist. So, I want to disable the option for him/her.

My REACT STATE structure is the following...

{
 "attributes": [ 
   {
     "id": 1,
     "type": "select",
     "name": "size",
     "values": [{id: 1, value: "M", selected: true}, {id: 2, value: "L", selected: false}, {id: 3, value: "S", selected: false}],
   },
   {
     "id": 2,
     "type": "radio",
     "name": "color",
     "values": [{id: 1, value: "WHITE", selected: false}, {id: 2, value: "BLACK", selected: false}],
   }
 ],


 "variants": [
   {
     id: 1,
     values: [
       {
         attribute_id: 1,
         id: 1
       },
       {
         attribute_id: 2,
         id: 1
       }
     ]
   },
   {
     id: 2,
     values: [
       {
         attribute_id: 1,
         id: 2
       },
       {
         attribute_id: 2,
         id: 2
       }
     ]
   }
 ]
}

so...when I select color WHITE and the size stays unselected... only the option "M" should be displayed. But when I select color BLACK... the size option should be "L" only. but when NOTHING is selected => EVERYTHING should be visible.

This check should happen EVERYTIME any ATTRIBUTE VALUE Changes. (when I select a SIZE = FILTER OTHER ATTRIBUTES etc...) and it should work dynamically no matter how many attributes are available for a variant.

Any ideas on how to do this please?

THANKS FOR YOUR HELP :)

Algorithm to disable unnecessary values in an array

0 Answers