JavaScript foreach objects

Question

I'm struggling with some algorithm with javascript. I'm using Vue as framework and state managament. I have an object that needs to be 'calculated' as variants.

For example, I have 3 objects and in those objects some values as array, like so:

"attributes":[
   {
      "title":{
         "text":"Size",
         "value":"1"
      },
      "values":[
         "M",
         "L",
         "X"
      ]
   },
   {
      "title":{
         "text":"Color",
         "value":"2"
      },
      "values":[
         "Red",
         "Green",
         "Black"
      ]
   },
   {
      "title":{
         "text":"Material"
      },
      "values":[
         "Cotton",
      ]
   }
]

So my state for this is obviously attributes. So what I really need to do is to foreach attribute values and create variant for every possible combination, and console.log them. Like so:

M/Red/Cotton, L/Red/Cotton, X/Red/Cotton, M/Green/Cotton, L/Green/Cotton, X/Green/Cotton, M/Black/Cotton, L/Black/Cotton, X/Black/Cotton

So I started function that will only foreach attributes, so I need to foreach values and make that codes (up) for them, but no idea how to proceed. So it looks like:

addVariant: function (text) {
          this.attributes.forEach(element => console.log(element));
        },

Shadab · Accepted Answer · 2021-03-28 18:45:42Z

4

Sounds like you want the cartesian product

For your specific case, this is probably what you're looking for,

addVariant: function (text) {
    let cartesian = (...a) => a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())), []);
    
    let values = this.attributes.map(attr => attr.values);
    let combinations = cartesian(...values).map(v => v.join('/'));
    console.log(combinations);
},

edited Mar 28, 2021 at 18:45

answered Mar 28, 2021 at 18:37

Shadab

1,3578 silver badges9 bronze badges

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

2 Comments

somebodytolove Over a year ago

That could be the answer, but when I'm testing it says that "TypeError: Cannot read property 'flatMap' of undefined

connexo Over a year ago

a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat()))) is missing a start a value as second argument to reduce. a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())), [])

Hassan Imam · Accepted Answer · 2021-03-28 18:44:46Z

2

You can use array#reduce with array#map and array#flatMap to generate cartesian product of values.

const attributes = [ { "title":{ "text":"Size", "value":"1" }, "values":[ "M", "L", "X" ] }, { "title":{ "text":"Color", "value":"2" }, "values":[ "Red", "Green", "Black" ] }, { "title":{ "text":"Material" }, "values":[ "Cotton", ] } ],
    result = attributes.reduce((r, o, i) => {
      const array = o.values.map(v => v);
      return i ? array.flatMap(v => r.map(w => (w + '\\' + v))): array;
    },[]);
console.log(result.join());

.as-console-wrapper { max-height: 100% !important; top: 0; }

answered Mar 28, 2021 at 18:44

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

4 Comments

somebodytolove Over a year ago

This is exactly what I need! Only problem is when I try to add my values from states, it's giving that map is undefined.

Hassan Imam Over a year ago

Sounds like your state have some objects which has missing values array. You can use o.values?.map(v => v)

Akash Sarode Over a year ago

result.join() will return a string, try mapping the result only.

somebodytolove Over a year ago

Thank you very much! It was mistake on my side, now it's working perfectly!

Akash Sarode · Accepted Answer · 2021-03-28 18:48:44Z

So basically you want to make combinations of attribute.values right? Here's an answer I found for making combinations with arrays of javascripts. https://stackoverflow.com/a/47701395/13095249 I'm not sure how that works I just copied the code.

Coming back to your problem, I would make an array for all attribute.values like

parts = attributes.map(attribute => attribute.values)

and run the code in above answer should give you the desired output

parts.reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []));

your addVariant function could look like:

addVariant: function (text) {
  const parts = this.attributes.map(attribute => attribute.values);
  const combinations = parts.reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []));
  console.log(combinations)
},

Collectives™ on Stack Overflow

JavaScript foreach objects

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related