Node Js - Flatten array of objects

Question

I have an array like this

var data = [
    {
        family: "Fam A",
        category: "Cat A",
        products: [
            {
                name: "Name A1",
                style: "Style A1"
            },
            {
                name: "Name A2",
                style: "Style A2"
            }
        ]
    },
    {
        family: "Fam B",
        category: "Cat B",
        products: [
            {
                name: "Name B1",
                style: "Style B1"
            },
            {
                name: "Name B2",
                style: "Style B2"
            }
        ]
    }
];

I want to change the inside objects like below

var data = [
    {family:"Fam A", category: "Cat A", name: "Name A1", style:"Style A1"},
    {family:"Fam A", category: "Cat A", name: "Name A2", style:"Style A2"},
    {family:"Fam B", category: "Cat B", name: "Name B1", style:"Style B1"},
    {family:"Fam B", category: "Cat B", name: "Name B2", style:"Style B2"}
]

I've tried using map and forEach that I found in other posts but haven't gotten anything to work.

var flattened = data.products.map(x => Object.assign(x, { productDetails: data.products }))

function getList(data, arrayKey, arrayName) {
    data[arrayKey].forEach(function(element) {
        element[arrayName] = data[arrayName];
    });
    return data[arrayKey];
}

The ideal solution would be able to handle dynamic no of nestings but not necessary to move on.

Thank you in advance for helping a newer dev!

Not supported in IE, but this javascript array method might get you partway there: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Chris Brenberg
– Chris Brenberg, Commented Mar 23, 2020 at 21:21
@brettB, do you still want "The ideal solution would be able to handle dynamic no of nestings"? If so check out my 2 recursive options. — Alex L
– Alex L, Commented Mar 24, 2020 at 20:34

Nina Scholz · Accepted Answer · 2020-03-23 21:21:46Z

4

You could take Array#flatMap with a nested mapping.

var data = [{ family: "Fam A", category: "Cat A", products: [{ name: "Name A1", style: "Style A1" }, { name: "Name A2", style: "Style A2" }] }, { family: "Fam B", category: "Cat B", products: [{ name: "Name B1", style: "Style B1" }, { name: "Name B2", style: "Style B2" }] }],
    flat = data.flatMap(({ products, ...o }) => products.map(p => ({ ...o, ...p })));

console.log(flat);

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

answered Mar 23, 2020 at 21:21

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

5 Comments

Guerric P Over a year ago

I was hoping you were not online :(

Nina Scholz Over a year ago

@GuerricP, why ...?

Guerric P Over a year ago

I can't even try an answer before you post a beautiful one :p

Brett B Over a year ago

Exactly what I'm looking for and clean to boot, thank you! Will accept when the timer allows.

Alex L Over a year ago

Very nice clean solution. I also created a general (recursive) solution, below: stackoverflow.com/a/60822386/9792594

Alex L · Accepted Answer · 2020-03-24 20:10:53Z

1

I can offer the general (recursive) solution: recursion

var data = [
    {
        family: "Fam A",
        category: "Cat A",
        products: {
            somekey: 'someval',
            items : {
                type: 'A type',
                list: [{name: "Name A1", style: "Style A1"},
                      {name: "Name A2", style: "Style A2"}]
            }
        }
    },
    {
        family: "Fam B",
        category: "Cat B",
        products: {
            somekey: 'someval',
            items :[{name: "Name B1", style: "Style B1"},
                   {name: "Name B2", style: "Style B2"}]
        }
    }
]; 

const output = data.reduce((aggArr, child) => {   
  function recursiveFlat(currChild, currParent){
    currParent = currParent || {};
    return Object.entries(currChild).reduce((aggChildArr,[key,val]) => {
      let tempObj = {...currParent, ...currChild}
      if (val instanceof Array){
        delete tempObj[key];
        val.forEach(item => {
          aggChildArr.push({...tempObj,...item});
        })
      }else if(val instanceof Object){
        delete tempObj[key];
        aggChildArr = [...aggChildArr, ...recursiveFlat(val, tempObj)];
      }
      return aggChildArr;
    },[])
  }
  const flatArr = recursiveFlat(child);
  flatArr.forEach(item => aggArr.push(item));
  return aggArr;
},[])

console.log(output);

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

update, trying to take the beautiful .flatMap() solution and make it generic & recursive:

const data = [{ family: "Fam A", category: "Cat A", items: { types: {type: 'A1-2', products: [{ name: "Name A1", style: "Style A1" }, { name: "Name A2", style: "Style A2" }]}, somekey: 'example' } }, { family: "Fam B", category: "Cat B", products: [{ name: "Name B1", style: "Style B1" }, { name: "Name B2", style: "Style B2" }] }];
    
function flatten(data){
  const flat = data.flatMap((obj) => {
    function innerFlatten(obj, parentObj){
      parentObj = parentObj || {};
      for (key in obj){
        if (obj[key] instanceof Array){
          const tempArr = obj[key];
          delete obj[key];
          return tempArr.map(p => ({...parentObj, ...obj, ...p }) ) 
        }else if (obj[key] instanceof Object){
          const tempObj = obj[key];
          delete obj[key];
          return innerFlatten(tempObj, {...parentObj, ...obj});
        }  
      }      
    }
    return innerFlatten(obj);    
  });
  return flat;
}

console.log(flatten(data));

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

edited Mar 24, 2020 at 20:10

answered Mar 23, 2020 at 22:27

Alex L

4,2711 gold badge11 silver badges30 bronze badges

5 Comments

Guerric P Over a year ago

what's the benefit of using this instead of a one-liner like in the accepted answer? ;)

Alex L Over a year ago

@GuerricP - the question said "ideal solution would be able to handle dynamic no of nestings" - my solution is recursive and dynamic to any depth. Also dynamic to any array, must not be named "products"

Alex L Over a year ago

For the specific solution, I would use the one-liner, it's much more elegant. But if the OP really wants a more general solution, then we need to handle the depth and array name differently.

Brett B Over a year ago

@AlexL I agree one-liner for my specific use case but this will likely come in handy sooner than later thank yoU!

Alex L Over a year ago

Great to hear. My pleasure.

xdeepakv · Accepted Answer · 2020-03-23 21:40:46Z

0

You can use reduce, faster and better.

var data = [{"family":"Fam A","category":"Cat A","products":[{"name":"Name A1","style":"Style A1"},{"name":"Name A2","style":"Style A2"}]},{"family":"Fam B","category":"Cat B","products":[{"name":"Name B1","style":"Style B1"},{"name":"Name B2","style":"Style B2"}]}];
const result = data.reduce(
  (map, { products, ...rest }) =>
    map.concat(products.map(product => ({ ...rest, ...product }))),
  []
);

console.log(result);

edited Mar 23, 2020 at 21:40

answered Mar 23, 2020 at 21:35

xdeepakv

8,1452 gold badges25 silver badges35 bronze badges

Collectives™ on Stack Overflow

Node Js - Flatten array of objects

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related