Node Js - 展平对象数组

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!

Answer 1

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; }

Answer 2

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; }

Answer 3

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);