[FIXED] How to can I do this array desctructure with condition?

Issue

I am facing one problem with array destructuring, Please read my questions-

This is array 1-

const Array1 = [
    {
        label: "Fashion",
        value: 1
    },
    {
        label: "Electronics",
        value: 2
    }
]

This is array2-

const Array2 = [
    {
        id: 1,
        values: [
            { value: "S", meta: "s" },
            { value: "M", meta: "m" },
            { value: "Xl", meta: "xl" },
        ]
    },
    {
        id: 2,
        values: [
            { value: "Red", meta: "red" },
            { value: "Yellow", meta: "yellow" },
            { value: "Green", meta: "green" },
        ]
    }
]

I have to combine this two array when Id(array2) matched to value(array1) and also change field label- like I need actually like this-

const Array3 = [
    {
        name: "Fashion",
        options: [
            { value: "S", label: "s" },
            { value: "M", label: "m" },
            { value: "Xl", label: "xl" },
        ]
    },
    {
        name: "Electronics",
        options: [
            { value: "Red", label: "red" },
            { value: "Yellow", label: "yellow" },
            { value: "Green", label: "green" },
        ]
    }
]

I have already tried in this way-

const Array3 = Array1.map((item) => {
    return {
        name: item.label,
        values: [],
        options: Array2.map((e: any) => {
            if (e.id === item.value) {
                return e.values.map((v: any) => {
                    return {
                        label: v.meta,
                        value: v.value
                    }
                })
            }
        })
    }
})

From this function I am getting – one extra field with undefined

Please click to see

But it’s not working. Please help me by giving a correction of my functions.

Solution

The reason why Array2.map doesn’t work is that map function always returns the same number of elements as the array you run .map on. So adding a condition results in undefined elements when condition doesn’t match. You can do this:

options: Array2.find(e => e.id === item.value).values.map(v => { 
  return { value: v.value, label: v.meta } 
})

While this works, I’d recommend taking a look at @Nina Scholz’s answer too as it makes use of Object/Dictionary which is much more efficient than running .find on Array2. O(1) vs O(n). So, if you expect to have lots of elements in Array2 or run this quite frequently then the more efficient solution would help

Answered By – long_hair_programmer

Answer Checked By – Marie Seifert (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published