Home > Back-end >  how to flat array of object into one object in javascript
how to flat array of object into one object in javascript

Time:10-06

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

CodePudding user response:

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

CodePudding user response:

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

  • Related