Flattening a JS object

Question

I have a JS array of objects which looks like:

[{
a : {},
b: {},
c: [{}, {}]
}]

Now I want to flatten this object in such a way, that the array now becomes:

[
  {
    a : {},
    b: {},
    c: {}
  },
  {
    a : {},
    b: {},
    c: {}
  },
]

Note that the array c was flattened, while all the other fields were duplicated across the two objects. What is the best way to do this?

Related: [Cartesian product of multiple arrays in JavaScript](/q/12303989/4642212). This isn’t flattening; it’s a Cartesian product. — Sebastian Simon, Oct 19 '22 at 19:17
Does this answer your question? [spread operator vs array.concat()](https://stackoverflow.com/questions/48865710/spread-operator-vs-array-concat) — Filip Zieliński, Oct 19 '22 at 19:19
Filip: No. Here I am looking for a way to create a separate object for each of the objects present in array c. — Dhruv Kaushal, Oct 19 '22 at 19:23
@Simon I think this might be what I'm looking for, will try! Thanks for sharing! — Dhruv Kaushal, Oct 19 '22 at 19:23
@Simon I think the solutions mentioned there work only on arrays, not on objects — Dhruv Kaushal, Oct 19 '22 at 19:28
Define "best". Your question is way too open-ended. Do you want the best performance for a well-known object structure? Or is performance less important than flexibility? What about code readability? "Best" is highly subjective. — JDB, Oct 19 '22 at 19:41
Apologies. By best I meant a concise and easy to understand piece of code. — Dhruv Kaushal, Oct 19 '22 at 19:44

score 3 · Answer 1 · answered Oct 19 '22 at 19:48

You're going to need a generic function to compute cartesian products and a small zip utility:

/// product([a,b,[c,d]]) => [a,b,c], [a,b,d]

function product(a) {
    let [head = null, ...tail] = a

    if (head === null)
        return [[]]

    if (!Array.isArray(head))
        head = [head]

    return product(tail).flatMap(p =>
        head.map(h => [h, ...p]))
}

/// zip([a,b], [c,d]) => [a,c], [b,d]

function zip(a, b) {
    return a.map((_, i) => [a[i], b[i]]);
}

//

obj = {
    a: 1,
    b: 2,
    c: [3, 4],
    d: [5, 6, 7]
}

for (let p of product(Object.values(obj)))
    console.log(JSON.stringify(
        Object.fromEntries(zip(Object.keys(obj), p))
    ))

score 2 · Answer 2 · answered Oct 19 '22 at 19:35

This is a perfect use case for Array.flatMap. It iterates over each element in the array and applies a function to it, then replaces that element with the flattened version of the array returned by the function, allowing you to replace the original element with one, zero, or multiple new elements.

Deep cloning is its own can of worms, so I've factored out the cloning function to allow it to be replaced with any given way of cloning. Currently it uses the standard JSON method, but this only works for a subset of possible objects. See the link about deep cloning for more info.

var data = [{
  a : {test:1},
  b: {test:2},
  c: [{test:3}, {test:4}]
}];

data = data.flatMap(obj => {
  //For each value of C in the object, clone the object and replace the clone's C value, then return the array of all clones
  return obj.c.map(cVal => ({...clone(obj), c:cVal}));
});

function clone(obj){
  return JSON.parse(JSON.stringify(obj)); //Clone objects by value (only works for JSON-compatible objects)
}

console.log(data);

Flattening a JS object

2 Answers2