我正在从具有3个表的关系数据库中获取数据：
var btnObj2 = [
{sect_id: 1, sect_title: 'Navigation', subsect_id: 1, subsect_title:'Übersicht', btn_id: 1, btn_title: 'Inhaltsverzeichnis'},
{sect_id: 1, sect_title: 'Navigation', subsect_id: 1, subsect_title: 'Übersicht', btn_id: 2, btn_title: 'Stichwortverzeichnis'},
{sect_id: 1, sect_title: 'Navigation', subsect_id: 2, subsect_title: 'Praxisphasen', btn_id: 3, btn_title: 'Trainingserfolg'},
{sect_id: 1, sect_title: 'Navigation', subsect_id: 2, subsect_title: 'Praxisphasen', btn_id: 4, btn_title: 'Trainingsablauf'},
{sect_id: 2, sect_title: 'Modul 1', subsect_id: 3, subsect_title: 'Mentor-Gespräche', btn_id: 5, btn_title: 'Lebenszeit'},
{sect_id: 2, sect_title: 'Modul 1', subsect_id: 3, subsect_title: 'Mentor-Gespräche', btn_id: 6, btn_title: 'Lebensplanung'},
{sect_id: 2, sect_title: 'Modul 1', subsect_id: 4, subsect_title: 'Just do it', btn_id: 7, btn_title: 'Vertrauen'},
{sect_id: 2, sect_title: 'Modul 1', subsect_id: 4, subsect_title: 'Just do it', btn_id: 8, btn_title: 'Verantwortung'}
];
必须重新构造此数据，以便每个部分都包含其子部分，并且每个子部分都包含其子子部分（子子部分是上面的代码片段中的按钮）。数据库的数据已经按照部分，子部分，子子部分的正确顺序返回。
输出必须如下：
var result = [
{
sect_id: 1,
sect_title: 'Navigation',
subsect: [
{
subsect_id: 1,
subsect_title: 'Übersicht',
buttons: [
{
btn_id: 1,
btn_title: 'Verantwortung'
},
{
btn_id: 2,
btn_title: 'Vertrauen'
}
]
},
{
subsect_id: 2,
subsect_title: 'Praxisphasen',
buttons: [
{
btn_id: 3,
btn_title: 'Trainingserfolg'
},
{
btn_id: 4,
btn_title: 'Trainingsablauf'
}
]
}
]
},
sect_id: 2,
sect_title: 'Module 1',
//.....
];
这是我用PHP方式进行的操作：
function prepareBtns(arr) {
var sectId, subsectId = ''
var newArr = []
arr.forEach((item) => {
if(sectId !== item.sect_id){
sectId = item.sect_id
}
if(subsectId !== item.subsect_id){
subsectId = item.subsect_id
}
//In PHP the following line does the Job
newArr[sectId][subsectId][] = item
})
return newArr
}
这是我的JS试用版之一。这导致空插槽：
function prepareBtnsXY(arr) {
var newArr = [];
arr.forEach((item) => {
if (!newArr[item.sect_id]) {
var objToPush = {
sectId: item.sect_id,
sectName: item.sect_title,
subsect: []
};
newArr[item.sect_id] = objToPush;
}
if (!newArr[item.sect_id].subsect[item.subsect_id]) {
var subObjToPush = {
subsectId: item.subsect_id,
subsectName: item.subsect_title,
buttons: []
};
newArr[item.sect_id].subsect[item.subsect_id] = subObjToPush;
}
if (!newArr[item.sect_id].subsect[item.subsect_id].buttons[item.btn_id]) {
var btnObjToPush = {
btnId: item.btn_id,
btnName: item.btn_title
};
newArr[item.sect_id].subsect[item.subsect_id].buttons[item.btn_id] = btnObjToPush;
}
});
return newArr
}
答案 0 :(得分：4)
您可以将所需的键存储在另一个数组中，其中每行的第一个键是用于分组的键值，以下键是该级别的数据键，最后一个键用于子级/子级。最终数组不包含子值，而是占位符undefined。
keys = [ // level key level properties children // ------------ ----------------------------- ---------- ['sect_id', 'sect_title' /* more keys */, 'subsect'], ['subsect_id', 'subsect_title', 'buttons'], ['btn_id', 'btn_title', undefined] ],
该算法通过获取实际数组并搜索相同的分组键和值来迭代数据并减少键。如果找不到，它将使用给定的键生成一个新级别，并将其推入数组，然后将子级数组返回到下一个级别。
此方法的优势在于，只需更改原始数据和相应的keys数组（作为分组规则集）即可轻松维护。
var data = [{ sect_id: 1, sect_title: 'Navigation', subsect_id: 1, subsect_title: 'Übersicht', btn_id: 1, btn_title: 'Inhaltsverzeichnis' }, { sect_id: 1, sect_title: 'Navigation', subsect_id: 1, subsect_title: 'Übersicht', btn_id: 2, btn_title: 'Stichwortverzeichnis' }, { sect_id: 1, sect_title: 'Navigation', subsect_id: 2, subsect_title: 'Praxisphasen', btn_id: 3, btn_title: 'Trainingserfolg' }, { sect_id: 1, sect_title: 'Navigation', subsect_id: 2, subsect_title: 'Praxisphasen', btn_id: 4, btn_title: 'Trainingsablauf' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 3, subsect_title: 'Mentor-Gespräche', btn_id: 5, btn_title: 'Lebenszeit' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 3, subsect_title: 'Mentor-Gespräche', btn_id: 6, btn_title: 'Lebensplanung' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 4, subsect_title: 'Just do it', btn_id: 7, btn_title: 'Vertrauen' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 4, subsect_title: 'Just do it', btn_id: 8, btn_title: 'Verantwortung' }],
keys = [['sect_id', 'sect_title', 'subsect'], ['subsect_id', 'subsect_title', 'buttons'], ['btn_id', 'btn_title', undefined]],
result = data.reduce((r, o) => {
keys.reduce((a, k) => {
var temp = a.find(p => o[k[0]] === p[k[0]]);
if (!temp) {
a.push(temp = Object.assign(
...k.map((l, i, { length }) =>
l && { [l]: i + 1 === length ? [] : o[l] })
));
}
return temp[k[k.length - 1]];
}, r);
return r;
}, []);
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }
答案 1 :(得分：3)
您可以通过以下方式获得所需的结果：
let r = {}, data = [{ sect_id: 1, sect_title: 'Navigation', subsect_id: 1, subsect_title: 'Übersicht', btn_id: 1, btn_title: 'Inhaltsverzeichnis' }, { sect_id: 1, sect_title: 'Navigation', subsect_id: 1, subsect_title: 'Übersicht', btn_id: 2, btn_title: 'Stichwortverzeichnis' }, { sect_id: 1, sect_title: 'Navigation', subsect_id: 2, subsect_title: 'Praxisphasen', btn_id: 3, btn_title: 'Trainingserfolg' }, { sect_id: 1, sect_title: 'Navigation', subsect_id: 2, subsect_title: 'Praxisphasen', btn_id: 4, btn_title: 'Trainingsablauf' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 3, subsect_title: 'Mentor-Gespräche', btn_id: 5, btn_title: 'Lebenszeit' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 3, subsect_title: 'Mentor-Gespräche', btn_id: 6, btn_title: 'Lebensplanung' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 4, subsect_title: 'Just do it', btn_id: 7, btn_title: 'Vertrauen' }, { sect_id: 2, sect_title: 'Modul 1', subsect_id: 4, subsect_title: 'Just do it', btn_id: 8, btn_title: 'Verantwortung' } ];
while (data.length) {
let {sect_id,sect_title,subsect_id,subsect_title,btn_id,btn_title} = data.pop(),
subsect = {subsect_id, subsect_title, buttons: [{btn_id, btn_title}]}
if(!r[sect_id])
r[sect_id] = {sect_id, sect_title, subsect: [subsect]}
else {
let sub = r[sect_id].subsect.find(x => x.subsect_id == subsect_id)
if(sub) sub.buttons.push({btn_id, btn_title})
else r[sect_id].subsect.push(subsect)
}
}
console.log(Object.values(r))
这个想法是使用while和Array.pop来不断地获取元素并继续构建树。