Not able to apply the spread operator on a multidimensional array

I have one multidimensional array for which I want to apply the spread operator to get one array with no duplicate values. Here is the multidimensional array:

colorArray = [
[‘Bead Link Layered Anklet’, ‘Gold, Hematite’],
[‘Bead Link Layered Anklet’, ‘Gold, Multi, Neutral’],
[‘Bead Link Layered Anklet’, ‘Gold, Multi, Neon’],
[‘Bead Link Layered Anklet’, ‘Gold, Multi, Neon’],
[‘Colorful Beaded Anklet’, ‘Fuchsia, Gold’],
[‘Colorful Beaded Anklet’, ‘Yellow’],
[‘Rhinestone Pave Chain Layered Anklets’,‘Gold Theme’]
]
When I flatten the array by applying a push operator, it is no longer a multidimensional array and it looks like this:
colorArray =
[
‘Bead Link Layered Anklet’,
‘Gold, Hematite’,
‘Bead Link Layered Anklet’,
‘Gold, Multi, Neutral’,
‘Bead Link Layered Anklet’,
‘Gold, Multi, Neon’,
‘Bead Link Layered Anklet’,
‘Gold, Multi, Neon’,
‘Colorful Beaded Anklet’,
‘Fuchsia, Gold’,
‘Colorful Beaded Anklet’,
‘Yellow’,
‘Rhinestone Pave Chain Layered Anklets’,
'Gold Theme ’
]

My problem is that I can only apply the spread operator if the array is flat but I want to preserve the structure so I don’t want to flatten it. This is what I get when I apply the spread operator to the flat array:

unique =
[
‘Bead Link Layered Anklet’,
‘Cream, Gold’,
‘Gold, Hematite’,
‘Gold, Multi, Neutral’,
‘Gold, Multi, Neon’,
‘Colorful Beaded Anklet’,
‘Fuchsia, Gold’,
‘Yellow’,
‘Rhinestone Pave Chain Layered Anklets’,
‘Gold Theme’
]

I want the result to look like this:

[‘Bead Link Layered Anklet’, [‘Gold, Hematite’, ‘Gold, Multi, Neutral’, ‘Gold, Multi, Neon’],
[‘Colorful Beaded Anklet’, [‘Fuchsia, Gold’, ‘Yellow’],
[‘Rhinestone Pave Chain Layered Anklets’,‘Gold Theme’]

This is what I used to get rid of duplicates:

unique = […new Set(colorArray)];

Correction: I want the result to look like this:

[‘Bead Link Layered Anklet’, [‘Gold, Hematite’, ‘Gold, Multi, Neutral’, ‘Gold, Multi, Neon’]],
[‘Colorful Beaded Anklet’, [‘Fuchsia, Gold’, ‘Yellow’]],
[‘Rhinestone Pave Chain Layered Anklets’,[‘Gold Theme’]]

You’re trying to treat your array subarrays as objects.

The spread operator is not going to be able to recognize your desire, so abandon it, and instead parse the array with a map function if you do desire to keep it as an array. I’d still recommend an object.

1 Like

As an object, here’s what the unique information looks like:

{
    "Bead Link Layered Anklet": [
        "Gold, Hematite",
        "Gold, Multi, Neutral",
        "Gold, Multi, Neon",
        "Gold, Multi, Neon"
    ],
    "Colorful Beaded Anklet": [
        "Fuchsia, Gold",
        "Yellow"
    ],
    "Rhinestone Pave Chain Layered Anklets": [
        "Gold Theme"
    ]
}

And you access it similar to an array.

unique[“Colorful Beaded Anklet”] is an array containing both “Fuschia, Gold”, and “Yellow”

The code that gives the above object structure is fairly easy:

var unique = colorArray.reduce(function (unique, [name, type]) {
    unique[name] = (unique[name] || []).concat(type);
    return unique;
}, {});

The only complexity is (unique[name] || []) to add an array for the items when it’s the first time the name has been seen.

1 Like

(That’s a much more elegant code form than I would have given. Thanks Paul, I must try to incorporate that style into my own work.)

1 Like

The answer was posted at https://stackoverflow.com/questions/61197391/not-able-to-apply-the-spread-operator-on-a-multidimensional-array/61200822#61200822

The answer posted there is the same as Paul’s, just with a lot more code in it.

1 Like

How is the code called to give the desired results?

It just does it. The desired unique set ends up in the variable called unique.

Sorry, I mean how do you display the results?
When I try:
console.log(unique.join(‘\n’));
I get an error message stating that unique is not a function,
which I understand as it should be an array.

No, it’s not an array, it’s an object.

You can pretty-print the object in a <pre> tag (which preserves whitespace formatting) with:

<pre id="result"></pre>
const result = document.querySelector("#result");
result.innerHTML = JSON.stringify(unique, null, 4);

Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.