Unnest object with array values

Question

Here's my input object —

{
    "email": [
      "abc"
    ],
    "name": [
      "def",
      "ghi"
    ],
    "number": [
      "123",
      "456"
    ]
}

Here's what I'm hoping to get as output —

[
  {
    "email":"abc",
    "name":"def",
    "number":"123"
  },
  {
    "email":"abc",
    "name":"ghi",
    "number":"123"
  },
  {
    "email":"abc",
    "name":"def",
    "number":"456"
  },
  {
    "email":"abc",
    "name":"ghi",
    "number":"456"
  }
]

And, here's my code —

const input = {
  "email": [
    "abc"
  ],
  "name": [
    "def",
    "ghi"
  ],
  "number": [
    "123",
    "456"
  ]
};

const keys = Object.keys(input);

const values = Object.values(input);
let depth = [];
let output = [];
values.forEach(value => depth.push(value.length));
depth = depth.reduce((a, b)=> a*b, 1);
let dict = {};
for (let i = 0; i < depth; i++) {
  for (let j = 0; j < keys.length; j++) {
    let key = keys[j];
    if (input[key][i] !== undefined) {
      dict[key] = input[key][i];
    }
  }
  console.log(dict);
  output.push(dict);
}
console.log(output);

Answer 1

Your approach by calculating the product of the lengths is certainly one that can work. But there are some problems with the implementation that make it fail:

• With let dict = {}; you only create one object, and that object is being pushed to the result array repeatedly. Any mutation to that object will thus be seen in very entry of that result array. So you should at least create that dict object in every iteration of the outer loop

• i will in many cases exceed the length of the input[key] array, so input[key][i] will be undefined. Yet you need to pick a value from that array. You should use modular logic to translate such i to a valid index, and then use the remainder of that i in the next iteration of the inner loop -- to pick a value from the next array.

Here is a slight adaptation of your code to tackle those issues. I also moved it into a function:

function cartesian(input) {
    let keys = Object.keys(input);
    let depth = Object.values(input).reduce((product, {length}) => product * length, 1);
    let result = [];
    for (let i = 0; i < depth; i++) {
        let j = i;
        let dict = {};
        for (let key of keys) {
            let size = input[key].length;
            dict[key] = input[key][j % size];
            j = Math.floor(j / size);
        }
        result.push(dict);
    }
    return result;
}

const input = {
  "email": [
    "abc"
  ],
  "name": [
    "def",
    "ghi"
  ],
  "number": [
    "123",
    "456"
  ]
};

let result = cartesian(input);
console.log(result);

Answer 2

This answer is based on the answers provided on this question.

Step 1

Extract the three arrays:

const {email, name, number} = input;

Step 2

Perform the cartesian product:

const cartesian = (...a) => a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())));
const product = cartesian(email, name, number);

Step 3

Recompose the output:

const output = product.map(triple => ({email: triple[0], name: triple[1], number: triple[2]}));

You can replace the cartesian function with other functions found in the related question, accordingly to the target version of ES you mean to support.

@pilchard proposes a more generic version, which doesn't need you to specify the properties, but just performs the cartesian product on all the ones available within an object, and it is:

const result = cartesian(...Object.entries(input).map(([k, vs]) => vs.map(v => [[k, v]]))).map(Object.fromEntries)