At the moment, the response sent back to the client-side appears in a specific structure:
[
{
"categoryName": "Orders",
"categoryItems": [
{
"group": "Group B",
"groupSettings": [
{
"settingName": "Group b description"
}
]
},
{
"group": "Group C",
"groupSettings": [
{
"settingName": "Group c description"
}
]
},
{
"group": "Group A",
"groupSettings": [
{
"settingName": "Group a description"
}
]
}
]
},
{
"categoryName": "Notifications",
"categoryItems": [
{
"group": "",
"groupSettings": [
{
"settingName": "Notification setting"
}
]
}
]
},
{
"categoryName": "Personalisation",
"categoryItems": [
{
"group": "",
"groupSettings": [
{
"settingName": "Personalisation setting"
}
]
}
]
}
]
The desired layout, however, should be different:
[
{
"categoryName": "Personalisation",
"categoryItems": [
{
"group": "",
"groupSettings": [
{
"settingName": "Personalisation setting"
}
]
}
]
},
{
"categoryName": "Notifications",
"categoryItems": [
{
"group": "",
"groupSettings": [
{
"settingName": "Notification setting"
}
]
}
]
},
{
"categoryName": "Orders",
"categoryItems": [
{
"group": "Group A",
"groupSettings": [
{
"settingName": "Group a description"
}
]
},
{
"group": "Group B",
"groupSettings": [
{
"settingName": "Group b description"
}
]
},
{
"group": "Group C",
"groupSettings": [
{
"settingName": "Group c description"
}
]
}
]
}
]
To sort the categoryName to match the expected order, I am considering using an array of objects with categoryName and sequence properties. However, I need help in implementing the sorting logic into my code.
This is my current code snippet:
const groupedData = _.chain(allData)
.groupBy('sectionName')
.map((allData, sectionName) => ({
categoryName: sectionName,
categorySettings: _.chain(allData)
.groupBy('group')
.map((groupSettings, group) => ({
group: group,
groupSettings: _.chain(groupSettings)
.sortBy('ordering')
.groupBy('title')
.map((titleSettings, title) => ({
settingName: title,
settingDescription: titleSettings[0].description,
settingInputs: _.map(titleSettings, ({name, value, inputSetting}) => ({
inputName: name,
inputValue: value,
inputConfig: inputSetting,
})),
}))
.value(),
}))
.value(),
}))
.value();