Not able to apply the spread operator on a multidimensional array

1

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

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.

3

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

4

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.

5

(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']]
6

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.

7

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

9

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.

11

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

13

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

14

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);
}
15

@camperextraordinaire
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.