Filtering array from object nested in array react

Question

I have an array of object which objects have array, and my problem is to filter objects based on values from a nested array.

const skus = [{
        id: 1,
        features: ["Slim"],
        fields: [{
            label: "Material",
            value: "Material1"
        }, ]
    },
    {
        id: 2,
        features: ["Cotton"],
        fields: [{
            label: "Material",
            value: "Material2"
        }, ]
    },
    {
        id: 3,
        features: ["Slim"],
        fields: [{
            label: "Material",
            value: "Material3"
        }, ]
    }
];

output should be array based on features array, example:

const result = [{
    id: 2,
    features: ["Cotton"],
    fields: [{
            label: "Material",
            value: "Material2"
        },
        {
            label: "Type",
            value: "Type2"
        }
    ]
}]

I tried to using filter method, but it only works on on objects, but not on arrays nested in objects

Exactly how do you go from the data given, skus to the desired result? Please clearly explain that and show your code as well. — PeterKA
– PeterKA, Commented Apr 1, 2022 at 13:33

Fateme Souri · Accepted Answer · 2022-11-15 17:48:07Z

2

const filteredData = skus.filter((item) =>
     (item.fields.filter((field) => field.value === "Material2")).length !== 0
);
console.log(filteredData);

I think this is what you meant...

edited Nov 15, 2022 at 17:48

answered Nov 15, 2022 at 17:37

Fateme Souri

215 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ilyes42 · Accepted Answer · 2022-04-01 09:36:51Z

1

I got the same output of the example you gave using :

skus.filter(sku => sku.features.includes("Cotton"));

I hope you can explain a bit more.

answered Apr 1, 2022 at 9:36

Ilyes42

311 silver badge2 bronze badges

Comments

Sanjeev_gupta2812 · Accepted Answer · 2022-04-01 09:35:30Z

0

Well to understand better you must understand that Array is also a special object only in javascript so you can perform filter on objects or the nested objects too.

skus.filter((item,keys)=>{
    return item['features'].includes("Cotton") // Pass the search term in includes
})

With this you can achieve your goal. Let me know if this works for you.

answered Apr 1, 2022 at 9:35

Sanjeev_gupta2812

2544 silver badges20 bronze badges

Comments

Pellay · Accepted Answer · 2022-04-01 09:40:03Z

The Filter method allows you to delve deeper into an objects properties and perform comparisons.

    const skus = [
                    { id: 1, features: ["Slim"], fields: [{ label: "Material", value: "Material1" },] },
                    { id: 2, features: ["Cotton"], fields: [{ label: "Material", value: "Material2" },] },
                    { id: 3, features: ["Slim"], fields: [{ label: "Material", value: "Material3" },] }
                ];
    
    let featureName = "Cotton"
    let results = skus.filter(s => s.features.includes(featureName))
    console.log(results);

I'm unsure where "{ label: "Type", value: "Type2" }" suddenly comes from in your results though?

Fauzan DP · Accepted Answer · 2022-11-15 23:49:21Z

I write this code, and got same output, I using id and value from index features

const skus = [
    {
        id: 1,
        features: ['Slim'],
        fields: [
            {
                label: 'Material',
                value: 'Material1'
            }
        ]
    },
    {
        id: 2,
        features: ['Cotton'],
        fields: [
            {
                label: 'Material',
                value: 'Material2'
            }
        ]
    },
    {
        id: 3,
        features: ['Slim'],
        fields: [
            {
                label: 'Material',
                value: 'Material3'
            }
        ]
    }
]

const result = skus.filter(
    (item) => item.id === 2 && item.features[0] === 'Cotton'
)
console.log(result)

Collectives™ on Stack Overflow

Filtering array from object nested in array react

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related