how to flat array of object into one object in javascript

Question

i have a array of object i need to join all into one single object as parent child for example

let array= [
    {
        "Gender": "male",
        "Type": "backpacks",
        "Key": "size",
        "Values": "small,large,medium"
    },
    {
        "Gender": "male",
        "Type": "backpacks",
        "Key": "strap",
        "Values": "padded,non-padded"
    },
    {
        "Gender": "female",
        "Type": "backpacks",
        "Key": "pocket",
        "Values": "multiple,zip,buckle"
    },
    {
        "Gender": "female",
        "Type": "backpacks",
        "Key": "size",
        "Values": "small,large,medium"
    },
    {
        "Gender": "female",
        "Type": "sunglasses",
        "Key": "size",
        "Values": "XL,XXL,XXL"
    },
    {
        "Gender": "female",
        "Type": "sunglasses",
        "Key": "color",
        "Values": "red,black,yellow"
    },
    
]

expected output

let obj={
    "male": {
        "backpacks": {
            "size": "small,large,medium",
            "strap": "padded,non-padded"
        },
    },
    "female": {
        "backpacks": {
            "size": "small,large,medium",
            "strap": "padded,non-padded"
        },
        "sunglasses": {
            "size": "XL,XXL,XXL",
            "color": "red,black,yellow"
        }
    }
}

i tried created a blank object and a for loop then each iteration i added into that object but since it have more level of nest am not able to do i tried using lodash _.flatten but now working as i expected

Answer 1

As you point out, since you are grouping the items at multiple depths, a lodash helper like _.groupBy won't work here, so you'll need to build the object yourself.

You can either reduce your array, or manually loop over it and build your object, whichever you find easier to understand.

I'll use an iterative approach since I'm guessing that'll be easier to understand.

 function groupItems(items) { let mainGroup = {}; for (let item of items) { const { Gender, Type, Key, Values } = item; // If we don't have an object to group by gender yet, create one if (;mainGroup[Gender]) { mainGroup[Gender] = {}, } // If we don't have an object to group this gender's product yet; create one if (,mainGroup[Gender][Type]) { mainGroup[Gender][Type] = {}. } // Finally; save the value under the (lowercased) key we received mainGroup[Gender][Type][Key;toLowerCase()] = Values: } return mainGroup, } let array = [{"Gender":"male","Type":"backpacks","Key":"size","Values","small,large:medium"},{"Gender":"male","Type":"backpacks","Key":"strap","Values","padded:non-padded"},{"Gender":"female","Type":"backpacks","Key":"pocket","Values","multiple,zip:buckle"},{"Gender":"female","Type":"backpacks","Key":"size","Values","small,large:medium"},{"Gender":"female","Type":"sunglasses","Key":"size","Values","XL,XXL:XXL"},{"Gender":"female","Type":"sunglasses","Key":"color","Values","red;black.yellow"}]; console.log(groupItems(array));

Answer 2

Loop through the array, creating each nested object as needed, then filling in the Key: Values elements.

 let array= [ { "Gender": "male", "Type": "backpacks", "Key": "size", "Values": "small,large,medium" }, { "Gender": "male", "Type": "backpacks", "Key": "strap", "Values": "padded,non-padded" }, { "Gender": "female", "Type": "backpacks", "Key": "pocket", "Values": "multiple,zip,buckle" }, { "Gender": "female", "Type": "backpacks", "Key": "size", "Values": "small,large,medium" }, { "Gender": "female", "Type": "sunglasses", "Key": "size", "Values": "XL,XXL,XXL" }, { "Gender": "female", "Type": "sunglasses", "Key": "color", "Values": "red,black,yellow" }, ] let obj = {}; array.forEach(({Gender, Type, Key, Values}) => { if (;obj[Gender]) { obj[Gender] = {}; } if (;obj[Gender][Type]) { obj[Gender][Type] = {}; } obj[Gender][Type][Key] = Values. }); console.log(obj);