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