javascriptarraysarraylistfilter

Filter 2 value with filter inside filter array in javascript


I have below main array

    {
     "variants": [
     {
      "product": {
        "uid": "MzU5",
        "name": "AISLING BODYSUIT - MEDIUM / OAT",
        "sku": "LBK-3514260",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": 8,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "OAT",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0Mg=="
        },
        {
          "label": "MEDIUM",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC80"
        }
      ]
    },
    {
      "product": {
        "uid": "MzY0",
        "name": "AISLING BODYSUIT - MEDIUM / VANILLA",
        "sku": "LBK-3516025",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": null,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "VANILLA",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
        },
        {
          "label": "MEDIUM",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC80"
        }
      ]
    },
    {
      "product": {
        "uid": "MzYw",
        "name": "AISLING BODYSUIT - LARGE / OAT",
        "sku": "LBK-3513388",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": 4,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "OAT",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0Mg=="
        },
        {
          "label": "LARGE",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC81"
        }
      ]
    },
    {
      "product": {
        "uid": "MzY1",
        "name": "AISLING BODYSUIT - LARGE / VANILLA",
        "sku": "LBK-3517556",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": 6,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "VANILLA",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
        },
        {
          "label": "LARGE",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC81"
        }
      ]
    },
    {
      "product": {
        "uid": "MzY2",
        "name": "AISLING BODYSUIT - EXTRA-LARGE / VANILLA",
        "sku": "LBK-3514153",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": 4,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "VANILLA",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
        },
        {
          "label": "EXTRA-LARGE",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC84Mg=="
        }
      ]
    },
    {
      "product": {
        "uid": "MzYy",
        "name": "AISLING BODYSUIT - EXTRA-SMALL / VANILLA",
        "sku": "LBK-35199",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": null,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "VANILLA",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
        },
        {
          "label": "EXTRA-SMALL",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC84MQ=="
        }
      ]
    },
    {
      "product": {
        "uid": "MzU4",
        "name": "AISLING BODYSUIT - SMALL / OAT",
        "sku": "LBK-3519478",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": 5,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "OAT",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0Mg=="
        },
        {
          "label": "SMALL",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC84MA=="
        }
      ]
    },
    {
      "product": {
        "uid": "MzYz",
        "name": "AISLING BODYSUIT - SMALL / VANILLA",
        "sku": "LBK-3515626",
        "stock_status": "IN_STOCK",
        "only_x_left_in_stock": null,
        "price_range": {
          "minimum_price": {
            "regular_price": {
              "value": 125,
              "currency": "USD"
            }
          }
        }
      },
      "attributes": [
        {
          "label": "VANILLA",
          "code": "color",
          "uid": "Y29uZmlndXJhYmxlLzkzLzE0MQ=="
        },
        {
          "label": "SMALL",
          "code": "size",
          "uid": "Y29uZmlndXJhYmxlLzEzOC84MA=="
        }
       ]
      }
     ]
   }

I have 2 values one for color variant Y29uZmlndXJhYmxlLzkzLzE0MQ== and one for size variant Y29uZmlndXJhYmxlLzEzOC84MA== so I want to filter out data like match above size and color id combination with variant-->attribute array so how I can do it


Solution

  • If the structure of the attributes is always the same, then attributes[0] is color and attributes[1] is size. In this case you can do:

    let filter = products.variants.filter(
      (prod) =>
        prod.attributes[0].uid === 'Y29uZmlndXJhYmxlLzkzLzE0MQ==' &&
        prod.attributes[1].uid === 'Y29uZmlndXJhYmxlLzEzOC84MA=='
    )
    

    If you think this structure might change, then you can also do:

    let filter = products.variants.filter(
      (prod) =>
        prod.attributes.find((x) => x.code === 'color' && x.uid === 'Y29uZmlndXJhYmxlLzkzLzE0MQ==') &&
        prod.attributes.find((x) => x.code === 'size' && x.uid === 'Y29uZmlndXJhYmxlLzEzOC84MA==')
    )
    

    Both should give you the same result:

    let products = {
      variants: [
        {
          product: {
            uid: 'MzU5',
            name: 'AISLING BODYSUIT - MEDIUM / OAT',
            sku: 'LBK-3514260',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: 8,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'OAT',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0Mg=='
            },
            {
              label: 'MEDIUM',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC80'
            }
          ]
        },
        {
          product: {
            uid: 'MzY0',
            name: 'AISLING BODYSUIT - MEDIUM / VANILLA',
            sku: 'LBK-3516025',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: null,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'VANILLA',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0MQ=='
            },
            {
              label: 'MEDIUM',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC80'
            }
          ]
        },
        {
          product: {
            uid: 'MzYw',
            name: 'AISLING BODYSUIT - LARGE / OAT',
            sku: 'LBK-3513388',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: 4,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'OAT',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0Mg=='
            },
            {
              label: 'LARGE',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC81'
            }
          ]
        },
        {
          product: {
            uid: 'MzY1',
            name: 'AISLING BODYSUIT - LARGE / VANILLA',
            sku: 'LBK-3517556',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: 6,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'VANILLA',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0MQ=='
            },
            {
              label: 'LARGE',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC81'
            }
          ]
        },
        {
          product: {
            uid: 'MzY2',
            name: 'AISLING BODYSUIT - EXTRA-LARGE / VANILLA',
            sku: 'LBK-3514153',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: 4,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'VANILLA',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0MQ=='
            },
            {
              label: 'EXTRA-LARGE',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC84Mg=='
            }
          ]
        },
        {
          product: {
            uid: 'MzYy',
            name: 'AISLING BODYSUIT - EXTRA-SMALL / VANILLA',
            sku: 'LBK-35199',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: null,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'VANILLA',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0MQ=='
            },
            {
              label: 'EXTRA-SMALL',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC84MQ=='
            }
          ]
        },
        {
          product: {
            uid: 'MzU4',
            name: 'AISLING BODYSUIT - SMALL / OAT',
            sku: 'LBK-3519478',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: 5,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'OAT',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0Mg=='
            },
            {
              label: 'SMALL',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC84MA=='
            }
          ]
        },
        {
          product: {
            uid: 'MzYz',
            name: 'AISLING BODYSUIT - SMALL / VANILLA',
            sku: 'LBK-3515626',
            stock_status: 'IN_STOCK',
            only_x_left_in_stock: null,
            price_range: {
              minimum_price: {
                regular_price: {
                  value: 125,
                  currency: 'USD'
                }
              }
            }
          },
          attributes: [
            {
              label: 'VANILLA',
              code: 'color',
              uid: 'Y29uZmlndXJhYmxlLzkzLzE0MQ=='
            },
            {
              label: 'SMALL',
              code: 'size',
              uid: 'Y29uZmlndXJhYmxlLzEzOC84MA=='
            }
          ]
        }
      ]
    }
    
    let filter1 = products.variants.filter(
      (prod) =>
        prod.attributes[0].uid === 'Y29uZmlndXJhYmxlLzkzLzE0MQ==' &&
        prod.attributes[1].uid === 'Y29uZmlndXJhYmxlLzEzOC84MA=='
    )
    
    let filter2 = products.variants.filter(
      (prod) =>
        prod.attributes.find((x) => x.code === 'color' && x.uid === 'Y29uZmlndXJhYmxlLzkzLzE0MQ==') &&
        prod.attributes.find((x) => x.code === 'size' && x.uid === 'Y29uZmlndXJhYmxlLzEzOC84MA==')
    )
    
    console.log(filter1)
    console.log(filter2)