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

There are no “quick fix” solutions for your problem. The closest one: Object.fromEntries() still will not give you desired result. You need to come up with the custom function that will remove duplicates in that way.

You can’t expect this to do what you want: you’re trying to apply it to two completely different pieces of data and want it to return the end result you have in your head. JS can’t know that

  • you have an array of two element arrays (tuples).
  • this is the normal representation of a Map data structure: the first element is the key, the second the value.
  • the value is a comma-separated list of values, and that it is in string form & needs to be converted to an array
  • you need to iterate through the Map, merging the values of entries with identical keys

You can use your method of getting an array of unique it’s on those merged values, that’s the only place it’s useful

Is it possible to change the data structure? A Map looks perfect for this situation.

['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 structure looks very weird honestly and it might not be an optimal way to do what you are trying to achieve.

(This is pretty much how Map looks under the hood)

The only weird part is this:

For consistency, you probably would want it like this:

['Rhinestone Pave Chain Layered Anklets', ['Gold Theme']]

ThanX 4 catching the mistake, snigo. What I wrote was a typo and the way you wrote it is how I want it to work.

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’]]

Based on the information regarding Map, see if you can implement it yourself. If you get stuck, show what you have written, and we can help guide you.

How about something like this:

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

You can either use an array of plain JavaScript objects or Map, but assuming that you don’t want repeated properties/keys (e.g. 'Bead Link Layered Ankle' should be only once in the list) I think a Map would be better.

I think Map is the way to go, so the key order is still the same. Then, the Map can be iterated through by the user for other purposes without losing the original order of the first element of each sub array. Using an object, would still require being converted back to an array, while somehow tracking the original order of the key as a third property of each object.

One question for @makamo66 would be do you have control on how the original colorArray is created? If so, why not create the desired final array dynamically (as you are scraping the page)? I assume this is still related to the webpage scraping you were asking about in an earlier topic.

I meant an array of objects. But since she doesn’t want repeated properties, Map should be better.

I knew you meant an array of objects. :grinning:

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

It can be looked at as very similar, logic-wise, to dealing with the tracks property in the FCC record collection challenge. You have an object, if that object has a key (your product name), push the colours to the array that is the value, otherwise create an entry with the colours.

function parseProducts (products) {
  const productMap = {};

  products.forEach((product) => {
    const [type, colours] = product;
    if (type in productMap) {
      if (productMap[type].includes(colours) === false) {
        productMap[type].push(materials);
      }
    } else {
      productMap[type] = [colours];
    }
  });

  return Object.entries(productMap);
}

@RandellDawson
Yes, this is related to Web scraping I asked about earlier. I am cleaning the data from the page that I scraped. I can’t imagine how I would accomplish creating the array dynamically while scraping the page. It sounds too complex to me.