I am doing a project in vue and I have a json with array inside array. I want to make a filter of months that in function to the months that I select shows the list of products with that filter
And I have a selector with several months (6, 12, 18) How can I show only the products that I have selected with the selector?
[
{
"active": true,
"installment": [
[
{
"product": "Ipad",
"months": 12,
"installment": 63.94
}
],
[
{
"product": "Ipad",
"months": 6,
"installment": 63.94
}
]
]
},
{
"active": true,
"installment": [
[
{
"product": "Iphone",
"months": 12,
"installment": 63.94
}
],
[
{
"product": "Iphone",
"months": 6,
"installment": 63.94
}
]
]
},
{
"active": true,
"installment": [
[
{
"product": "Mac",
"months": 18,
"installment": 63.94
}
],
[
{
"product": "Mac",
"months": 24,
"installment": 63.94
}
]
]
}
]You can iterate through your array, and then push the elements which passes the criteria to a new array, it would look something like this
const array = [
{
"active": true,
"installment": [
[
{
"product": "Ipad",
"months": 12,
"installment": 63.94
}
],
[
{
"product": "Ipad",
"months": 6,
"installment": 63.94
}
]
]
},
{
"active": true,
"installment": [
[
{
"product": "Iphone",
"months": 12,
"installment": 63.94
}
],
[
{
"product": "Iphone",
"months": 6,
"installment": 63.94
}
]
]
},
{
"active": true,
"installment": [
[
{
"product": "Mac",
"months": 18,
"installment": 63.94
}
],
[
{
"product": "Mac",
"months": 24,
"installment": 63.94
}
]
]
}
]
let res = [];
// const filter = (y) => y.months == 6;
// if you have multiple filters
const filter = (y) => [6, 12, 18].includes(y.months);
array.forEach(x => {
x.installment.forEach(y => {
y[0].active = x.active;
if (filter(y[0])) res = [...res, ...y];
})
})
console.log(res);You can just filter them
const data = [
{
"active": true,
"installment": [
[
{
"product": "Ipad",
"months": 12,
"installment": 63.94
}
],
[
{
"product": "Ipad",
"months": 6,
"installment": 63.94
}
]
]
},
{
"active": true,
"installment": [
[
{
"product": "Iphone",
"months": 12,
"installment": 63.94
}
],
[
{
"product": "Iphone",
"months": 6,
"installment": 63.94
}
]
]
},
{
"active": true,
"installment": [
[
{
"product": "Mac",
"months": 18,
"installment": 63.94
}
],
[
{
"product": "Mac",
"months": 24,
"installment": 63.94
}
]
]
}
]
const filtered = data.map((item) => {
const { installment } = item;
const filteredInstallment = installment.map((item) => {
const filteredProducts = item.filter((product) => product.months === 6)
return filteredProducts;
});
return filteredInstallment;
});
console.log(filtered)