Dynamically create array of objects from the object with the array values

Question

Currently I have the below object structure,

`let selectedOptions = {
  "color": {
    "id": "2",
    "values": [
      {
        "value": "red",
        "label": "Red",
        "id": 1
      },
      {
        "value": "blue",
        "label": "Blue",
        "id": 2
      }
    ]
  },
  "size": {
    "id": "19",
    "values": [
      {
        "value": "medium",
        "label": "Medium",
        "id": 2
      }
    ]
  },
  "demo": {
    "id": "19",
    "values": [
      {
        "value": "neylon",
        "label": "Neylon",
        "id": 2
      }
    ]
  }
  .
  .
  .
  N
}; `

And want to create array of objects from the above object like as below,

[
 { color: "red", size: "medium", demo: "neylon" },
 { color: "blue", size: "medium", demo: "neylon" }
]

I have tried like below but it didn't worked https://jsfiddle.net/6Lvb12e5/18/

let cArr = [];
for(key in selectedOptions) {
  selectedOptions[key].values.forEach(function(val,i) {
   cArr.push({ [key]: val.value  })
  })
}

Thanks

What if the size is having more than one object, how do you create your final array from that? — Aamin Khan
– Aamin Khan, Commented Dec 16, 2018 at 12:16
@AaminKhan - For example Size contains another values as Small. Then the final array should be like, [ { color: "red", size: "medium", demo: "neylon" }, { color: "red", size: "small", demo: "neylon" }, { color: "blue", size: "medium", demo: "neylon" }, { color: "blue", size: "small", demo: "neylon" } ] — Sunface
– Sunface, Commented Dec 16, 2018 at 12:19
What do you mean by "it didn't work"? Can you paste your wrong results (contained in the cArr, I presume)? — Armen Michaeli
– Armen Michaeli, Commented Dec 16, 2018 at 12:28

Nina Scholz · Accepted Answer · 2018-12-16 14:19:19Z

1

You could take the wanted parts, like color, size and demo and build a cartesian product out of the given data.

const
    cartesian = (a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []),
    options = { color: { id: "2", values: [{ value: "red", label: "Red", id: 1 }, { value: "blue", label: "Blue", id: 2 }] }, size: { id: "19", values: [{ value: "small", label: "Small", id: 1 }, { value: "medium", label: "Medium", id: 2 }] }, demo: { id: "19", values: [{ value: "neylon", label: "Neylon", id: 2 }] } },
    parts = Object
        .entries(options)
        .map(([k, { values }]) => [k, values.map(({ value }) => value)]),
    keys = parts.map(([key]) => key),
    result = parts
        .map(([, values]) => values)
        .reduce(cartesian)
        .map(a => Object.assign(...a.map((v, i) => ({ [keys[i]]: v }))));

console.log(result);

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

edited Dec 16, 2018 at 14:19

answered Dec 16, 2018 at 12:36

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

1 Comment

Sunface Over a year ago

Thanks @nina-scholz, Its working. But if the Size or demo object have more Values, then the results is not as expected. For example, if the Size values have another value as 'small', then the result should be as

[ { color: "red", size: "medium", demo: "neylon" }, { color: "red", size: "small", demo: "neylon" }, { color: "blue", size: "medium", demo: "neylon" }, { color: "blue", size: "small", demo: "neylon" } ]

.

Prashant Pimpale · Accepted Answer · 2018-12-16 12:33:08Z

I am not sure that is this the best way to do this, and even the data is missing but as a comment, it is quite big to post but can try:

let selectedOptions = {
  "color": {
    "id": "2",
    "values": [
      {
        "value": "red",
        "label": "Red",
        "id": 1
      },
      {
        "value": "blue",
        "label": "Blue",
        "id": 2
      }
    ]
  },
  "size": {
    "id": "19",
    "values": [
      {
        "value": "medium",
        "label": "Medium",
        "id": 2
      }
    ]
  },
  "demo": {
    "id": "19",
    "values": [
      {
        "value": "neylon",
        "label": "Neylon",
        "id": 2
      }
    ]
  }
}; 

let cArr = [];
var obj = {};
var glob;
for(key in selectedOptions) {
  selectedOptions[key].values.forEach(function(val,i) {
  obj[key] = val.value;
  }
)
  glob = obj;
}
cArr.push(glob);
console.log(cArr)

Collectives™ on Stack Overflow

Dynamically create array of objects from the object with the array values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related