SDK
Reputation: 1518
Restructure array of data in javascript and to create the function as a reusable one by passing dynamic values
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 }));
Upvotes: 2
Views: 95
Answers (1)
A1exandr Belan
Reputation: 4780
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 }Upvotes: 1
Related Questions
- How to dynamically create arguments as functions from an array
- Take array of values and defined function and generate an array of functions with each containing the respective values
- Javascript functional programming and dynamic values in an Array
- Need to make this array of objects function reusable in javaScript
- How to make this function more reusable/specific/better design?
- Need some ideas on how to use functional programming in JavaScript to reuse a function
- Dynamically call function with multiple arguments
- Working With Multi Functional Array In Javascript
- Javascript dynamic function
- Call Array Dynamically in a function