Restructure array of data in javascript and to create the function as a reusable one by passing dynamic values

Question

Hi I am having an array like this

Given Data

[
  {
    "id": "Client 1",
    "mName": "SDk",
    "cName": "Thor Odin",
    "gName": "",
    "gAmt": 80000,
    "gls": 2,
    "value": 0.855,
    "date": "22/1/2022",
    "income": "",
    "subRows": [
      {
        "id": "goal-1",
        "cName": "",
        "mName": "",
        "gName": "Retirement1",
        "gAmt": 10000,
        "gls": 1,
        "income": "60/40",
        "date": "22/1/2022",
        "value": 0.99
      },
      {
        "id": "goal-2",
        "cName": "",
        "mName": "",
        "gName": "Save For Child Education",
        "gAmt": 70000,
        "gls": 1,
        "income": "55/45",
        "date": "5/12/2023",
        "value": 0.72
      }
    ]
  },
  {
    "id": "Client 2",
    "mName": "SDk",
    "cName": "Steve Rogers",
    "gName": "Save for Investment",
    "gAmt": 67000,
    "gls": 1,
    "value": 0.7,
    "date": "22/1/2022",
    "income": "60/40"
  },
  {
    "id": "Client 3",
    "mName": "Pal",
    "cName": "Wanda Vision",
    "gls": 0,
    "value": 0.9,
    "date": "",
    "income": ""
  },
  {
    "id": "Client 4",
    "mName": "Pal",
    "cName": "Tony Stark",
    "gName": "",
    "gAmt": 23500,
    "gls": 2,
    "value": 0.29,
    "date": "27/10/2019",
    "income": "",
    "subRows": [
      {
        "id": "goal-4",
        "cName": "",
        "mName": "",
        "gName": "Education Loan",
        "gAmt": 500,
        "gls": 1,
        "income": "60/40",
        "date": "27/10/2019",
        "value": 0.29
      },
      {
        "id": "goal-5",
        "cName": "",
        "mName": "",
        "gName": "House Loan",
        "gAmt": 23000,
        "gls": 1,
        "income": "30/70",
        "date": "16/6/2022",
        "value": 0.29
      }
    ]
  },
  {
    "id": "Client 5",
    "mName": "Joe",
    "cName": "Hack Eye",
    "gName": "Save For World Tour",
    "gAmt": 400000,
    "gls": 1,
    "value": 0.74,
    "date": "",
    "income": "60/40"
  },
  {
    "id": "Client 6",
    "mName": "Joe",
    "cName": "Nick Fury",
    "gName": "",
    "gAmt": 51070,
    "gls": 2,
    "value": 0.44499999999999995,
    "date": "9/3/2022",
    "income": "",
    "subRows": [
      {
        "id": "goal-7",
        "cName": "",
        "mName": "",
        "gName": "To Build A Workspace",
        "gAmt": 42340,
        "gls": 1,
        "income": "60/40",
        "date": "9/3/2022",
        "value": 0.6
      },
      {
        "id": "goal-8",
        "cName": "",
        "mName": "",
        "gName": "Cloud Examination",
        "gAmt": 8730,
        "gls": 1,
        "income": "30/70",
        "date": "9/11/2021",
        "value": 0.29
      }
    ]
  }
]

And I need to convert the above array into like this

[
  {
    "mName": "SDk",
    "id": "",
    "cName": "",
    "gName": "",
    "gAmt": "",
    "gls": "",
    "value": "",
    "date": "",
    "income": "",
    "subRows": [
      {
        "mName": "",
        "id": "Client 1",
        "cName": "Thor Odin",
        "gName": "",
        "gAmt": 80000,
        "gls": 2,
        "value": 0.855,
        "date": "22/1/2022",
        "income": "",
        "subRows": [
          {
            "id": "goal-1",
            "cName": "",
            "mName": "",
            "gName": "Retirement1",
            "gAmt": 10000,
            "gls": 1,
            "income": "60/40",
            "date": "22/1/2022",
            "value": 0.99
          },
          {
            "id": "goal-2",
            "cName": "",
            "mName": "",
            "gName": "Save For Child Education",
            "gAmt": 70000,
            "gls": 1,
            "income": "55/45",
            "date": "5/12/2023",
            "value": 0.72
          }
        ]
      },
      {
        "mName": "",
        "id": "Client 2",
        "cName": "Steve Rogers",
        "gName": "Save for Investment",
        "gAmt": 67000,
        "gls": 1,
        "value": 0.7,
        "date": "22/1/2022",
        "income": "60/40"
      },
      {
        "mName": "",
        "id": "Client 3",
        "cName": "Wanda Vision",
        "gls": 0,
        "value": 0.9,
        "date": "",
        "income": ""
      },
      {
        "mName": "",
        "id": "Client 4",
        "cName": "Tony Stark",
        "gName": "",
        "gAmt": 23500,
        "gls": 2,
        "value": 0.29,
        "date": "27/10/2019",
        "income": "",
        "subRows": [
          {
            "id": "goal-4",
            "cName": "",
            "mName": "",
            "gName": "Education Loan",
            "gAmt": 500,
            "gls": 1,
            "income": "60/40",
            "date": "27/10/2019",
            "value": 0.29
          },
          {
            "id": "goal-5",
            "cName": "",
            "mName": "",
            "gName": "House Loan",
            "gAmt": 23000,
            "gls": 1,
            "income": "30/70",
            "date": "16/6/2022",
            "value": 0.29
          }
        ]
      }
    ]
  },
  {
    "mName": "Joe",
    "id": "",
    "cName": "",
    "gName": "",
    "gAmt": "",
    "gls": "",
    "value": "",
    "date": "",
    "income": "",
    "subRows": [
      {
        "mName": "",
        "id": "Client 5",
        "cName": "Hack Eye",
        "gName": "Save For World Tour",
        "gAmt": 400000,
        "gls": 1,
        "value": 0.74,
        "date": "",
        "income": "60/40"
      },
      {
        "mName": "",
        "id": "Client 6",
        "cName": "Nick Fury",
        "gName": "",
        "gAmt": 51070,
        "gls": 2,
        "value": 0.44499999999999995,
        "date": "9/3/2022",
        "income": "",
        "subRows": [
          {
            "id": "goal-7",
            "cName": "",
            "mName": "",
            "gName": "To Build A Workspace",
            "gAmt": 42340,
            "gls": 1,
            "income": "60/40",
            "date": "9/3/2022",
            "value": 0.6
          },
          {
            "id": "goal-8",
            "cName": "",
            "mName": "",
            "gName": "Cloud Examination",
            "gAmt": 8730,
            "gls": 1,
            "income": "30/70",
            "date": "9/11/2021",
            "value": 0.29
          }
        ]
      },
      {
        "mName": "",
        "id": "Client 7",
        "cName": "Star Lord",
        "gName": "Save For Child Education",
        "gAmt": 400000,
        "gls": 1,
        "value": 0.93,
        "date": "",
        "income": "55/45"
      }
    ]
  },
  {
    "mName": "Pal",
    "id": "",
    "cName": "",
    "gName": "",
    "gAmt": "",
    "gls": "",
    "value": "",
    "date": "",
    "income": "",
    "subRows": [
      {
        "mName": "",
        "id": "Client 8",
        "cName": "Thanos",
        "gName": "",
        "gAmt": 1200000,
        "gls": 3,
        "value": 0.29,
        "date": "2/11/2019",
        "income": "",
        "subRows": [
          {
            "id": "goal-10",
            "cName": "",
            "mName": "",
            "gName": "Relocation Expense Goal",
            "gAmt": 400000,
            "gls": 1,
            "income": "22/78",
            "date": "2/11/2019",
            "value": 0.29
          },
          {
            "id": "goal-11",
            "cName": "",
            "mName": "",
            "gName": "Save for to buy bike",
            "gAmt": 400000,
            "gls": 1,
            "income": "50/50",
            "date": "1/1/2020",
            "value": 0.29
          },
          {
            "id": "goal-12",
            "cName": "",
            "mName": "",
            "gName": "Save For Education",
            "gAmt": 400000,
            "gls": 1,
            "income": "65/35",
            "date": "9/5/2022",
            "value": 0.29
          }
        ]
      },
      {
        "mName": "",
        "id": "Client 9",
        "cName": "Ego",
        "gName": "Save For Education",
        "gAmt": 400000,
        "gls": 1,
        "value": 0.72,
        "date": "",
        "income": "65/35"
      },
      {
        "mName": "",
        "id": "Client 10",
        "cName": "Bruce Banner",
        "gName": "",
        "gAmt": 27600,
        "gls": 2,
        "value": 0.975,
        "date": "9/10/2018",
        "income": "",
        "subRows": [
          {
            "id": "goal-14",
            "cName": "",
            "mName": "",
            "gName": "Car Loan",
            "gAmt": 23000,
            "gls": 1,
            "income": "60/40",
            "date": "9/10/2018",
            "value": 0.99
          },
          {
            "id": "goal-15",
            "cName": "",
            "mName": "",
            "gName": "Bike Loan",
            "gAmt": 4600,
            "gls": 1,
            "income": "30/70",
            "date": "9/11/2021",
            "value": 0.96
          }
        ]
      }
    ]
  }
]

The below function works fine on converting the given data into the desired format.

const emptyNode = {
  mName: "",
  id: "",
  cName: "",
  gName: "",
  gAmt: "",
  gls: "",
  value: "",
  date: "",
  income: "",
  subRows: [],
};

const groupsByMName = data.reduce((acc, item) => {
  acc[item.mName] ??= [];
  acc[item.mName].push({ ...item, mName: "" });
  return acc;
}, {});

const arrExpected = Object.entries(groupsByMName)
  .map(([mName, subRows]) => ({ ...emptyNode,  mName, subRows }));

But, Is there a way we can make this function reusable by accepting the key dynamically? Currently, this function works only for mName. If we want to group by some other key means. is that possible

My Tries

Dynamic Key Passing

I could able to pass the key upto the first level of the function.

Usind this

let dynamicKey = 'managerName'

  const groupsByMangerName = data.reduce((acc, item) => {
    acc[item[dynamicKey]] ??= [];
    acc[item[dynamicKey]].push({ ...item, [dynamicKey]: "" });
    return acc;
  }, {});

But not able to pass this into the below section:

const arrExpected = Object.entries(groupsByMName)
  .map(([mName, subRows]) => ({ ...emptyNode,  mName, subRows }));

A1exandr Belan · Accepted Answer · 2022-07-28 12:19:49Z

I just tweaked the code a little bit

const data = [{"id":"Client 1","mName":"SDk","cName":"Thor Odin","gName":"","gAmt":80000,"gls":2,"value":0.855,"date":"22/1/2022","income":"","subRows":[{"id":"goal-1","cName":"","mName":"","gName":"Retirement1","gAmt":10000,"gls":1,"income":"60/40","date":"22/1/2022","value":0.99},{"id":"goal-2","cName":"","mName":"","gName":"Save For Child Education","gAmt":70000,"gls":1,"income":"55/45","date":"5/12/2023","value":0.72}]},{"id":"Client 2","mName":"SDk","cName":"Steve Rogers","gName":"Save for Investment","gAmt":67000,"gls":1,"value":0.7,"date":"22/1/2022","income":"60/40"},{"id":"Client 3","mName":"Pal","cName":"Wanda Vision","gls":0,"value":0.9,"date":"","income":""},{"id":"Client 4","mName":"Pal","cName":"Tony Stark","gName":"","gAmt":23500,"gls":2,"value":0.29,"date":"27/10/2019","income":"","subRows":[{"id":"goal-4","cName":"","mName":"","gName":"Education Loan","gAmt":500,"gls":1,"income":"60/40","date":"27/10/2019","value":0.29},{"id":"goal-5","cName":"","mName":"","gName":"House Loan","gAmt":23000,"gls":1,"income":"30/70","date":"16/6/2022","value":0.29}]},{"id":"Client 5","mName":"Joe","cName":"Hack Eye","gName":"Save For World Tour","gAmt":400000,"gls":1,"value":0.74,"date":"","income":"60/40"},{"id":"Client 6","mName":"Joe","cName":"Nick Fury","gName":"","gAmt":51070,"gls":2,"value":0.44499999999999995,"date":"9/3/2022","income":"","subRows":[{"id":"goal-7","cName":"","mName":"","gName":"To Build A Workspace","gAmt":42340,"gls":1,"income":"60/40","date":"9/3/2022","value":0.6},{"id":"goal-8","cName":"","mName":"","gName":"Cloud Examination","gAmt":8730,"gls":1,"income":"30/70","date":"9/11/2021","value":0.29}]}];

const restucture = (data, keyName = 'mName') => {
  const emptyNode = {
    mName: "",
    id: "",
    cName: "",
    gName: "",
    gAmt: "",
    gls: "",
    value: "",
    date: "",
    income: "",
    subRows: [],
  };
  
  const groups = data.reduce((acc, item) => {
    acc[item[keyName]] ??= [];
    acc[item[keyName]].push({ ...item, [keyName]: "" });
    return acc;
  }, {});

  return Object.entries(groups)
    .map(([keyValue, subRows]) => (
        { ...emptyNode,  [keyName]: keyValue , subRows }
    ));  
};

console.log(restucture(data, 'cName'));

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

Hi, Thanks for the answer, is it possible to extend the function to furthermore support an additional level of nesting? I have added my query in Multi Level Nesting, section. Please let me know the possibility

Collectives™ on Stack Overflow

Restructure array of data in javascript and to create the function as a reusable one by passing dynamic values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related