在javascript中使用过滤器数组内的过滤器过滤2值

问题描述 投票：0回答：1

我有以下主数组

    {
     "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=="
        }
       ]
      }
     ]
   }

我有 2 个值，一个用于颜色变体 Y29uZmlndXJhYmxlLzkzLzE0MQ==，一个用于尺寸变体 Y29uZmlndXJhYmxlLzEzOC84MA== 所以我想过滤掉数据，例如与变体 - >属性数组匹配上面的大小和颜色 id 组合，那么我如何可以做吧

javascript arrays arraylist filter
1个回答
0
投票

如果

attributes
的结构始终相同，则attributes[0]是颜色，attributes[1]是大小。在这种情况下你可以这样做：

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

如果你认为这个结构可能会改变，那么你也可以这样做：

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==')
)

两者应该给你相同的结果：

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)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.