Здравствуйте, уважаемые форумчане. Требуется помощь в создание многоуровневого меню. Имеется следующие данные в js.
"tags": {
"language": {
"parent": {
"button": {
"parent": {
"home": {
"parent": null
}
}
}
}
},
"meta": { "parent": ["user", "required_fields", "button"] },
"button": { "parent": ["meta", "statistics", "home"] },
"user":{"parent": "home"},
"required_fields":{"parent":null},
"transactions":{"parent":null},
"statistics":{"parent":null},
"home":{"parent":null}
}
Требуется по этим данным, создать меню, учитывающее вложенность до 3-го уровня. Как вижу решение данной задачи.
Пункт1. Сначала "развернуть" данные пункты меню и создать цепочку из child, взамен parent'ов примерно такого вида:
"tags": {
"home": {
"child": {
"button": {
"child": {
"language": {
"child": null
}
}
}
}
},
"user": { "child": "meta"}
}
Пункт 2. По этой цепочке с помощью рекурсивной функции построить список и вставить в DOM-структуру в необходимом месте.
Что на данный момент уже реализовал.
Пункт 1:
//объявляю переменную с входными данными
var tags = json.tags;
//создаю пустой объект, где будет храниться структурированные данные
var tag_str = {};
function ref(tags, x, y) {
for (key in tags) {
console.log('key=', tags[key].parent);
//если parent null, то создаю ключ в новой структуре со значением null
if (tags[key].parent == null) {
tag_str[key] = null;
// рассматриваю случай, когда parent является массивом
} else if (tags[key].parent instanceof Array) {
//пробегаю по всем элементам массива
//и создаю объекты в новой структуре, где переназначаю свойства с parent на child
for (var i = 0; i < tags[key].parent.length; i++) {
if (typeof tag_str[tags[key].parent[i]] == "object" && !(tag_str[tags[key].parent[i]] instanceof Array)) {
if (tag_str[tags[key].parent[i]] && typeof tag_str[tags[key].parent[i]].child == "object" && !( tag_str[tags[key].parent[i]].child instanceof Array ) ) {
tag_str[tags[key].parent[i]].child[key] = null;
} else {
tag_str[tags[key].parent[i]] = {};
tag_str[tags[key].parent[i]].child = {};
tag_str[tags[key].parent[i]].child[key] = null;
}
} else {
tag_str[tags[key].parent[i]] = {};
if (typeof tag_str[tags[key].parent[i]].child == "object" && !(tag_str[tags[key].parent[i]].child instanceof Array)) {
tag_str[tags[key].parent[i]].child[key] = null;
} else {
tag_str[tags[key].parent[i]].child = {};
tag_str[tags[key].parent[i]].child[key] = null;
}
}
}
//рассматриваю случай, когда parent объект
} else if (typeof tags[key].parent == "object" && !(tags[key].parent instanceof Array)) {
if (tags[key].parent !== null) {
// x вводится для учёта вложенности новой структуры
if(x) {
tag_str[key] = {};
tag_str[key].child = {};
tag_str[key].child[x] = null;
ref(tags[key].parent, x);
}
else {
tag_str[tags[key].parent] = {};
tag_str[tags[key].parent].child = {};
tag_str[tags[key].parent].child = null;
console.log('приехали');
var x = key;
ref(tags[key].parent, x);
}
}
else {
console.log('parent null');
}
}
}
}
Пункт 2.
ref(tags);
var tags = json.tags;
function rec(tag_str, c) {
var str = '';
for (key in tag_str) {
if (tag_str[key].child == null) {
str += rec(tag_str[key].child);
str += '<ul><li>' + key ;
delete tag_str[key];
}
else {
if (typeof tag_str[key].child == 'object' && !tag_str[key].child instanceof Array) {
str += rec(tag_str[key].child);
str += '<li>' + key;
// delete tag_str[key];
}
if (tag_str[key].parent instanceof Array) {
for (var i = 0; i < tag_str[key].child.length; i++) {
str += '<li>' + tag_str[key].child[i];
// delete tag_str[key][i];
}
str += rec(tag_str[key].child);
// delete tags[key];
}
}
}
str += '</li>'
str += '</ul>';
return str;
}
В итоге строится структура. Для массивов всё создается вроде как нормально, но для объектов не учитывается вложенность. Возможно всё делается проще и не нужно такое нагромождение условий. Буду благодарен за помощь в решение данной задачи.
