10.10.2016, 18:31
|
|
Интересующийся
|
|
Регистрация: 10.10.2016
Сообщений: 10
|
|
|
Хранение данных в объекте и вывод многомерного списка
Добрый подскажите, пожалуйста, такой момент.
У меня есть такой код
// JavaScript source code
(function () {
'use strict';
function Base(_artist, _album, _song, _attributes) {
this.artist = _artist;
this.album = _album;
this.song = _song;
this.attributes = _attributes;
}
var base = [];
base.push(new Base("Apocalyptica", [
"Reflections",
"Amplified"
],
["Enter Sandman", "Harmageddon", "Nothing Else Matters"]
));
base.push(new Base("Rammstein", ["Mutter"], [
"Mein Herz Brennt",
"Links 234",
"Sonne",
"Ich Will",
],
{
"Mein Herz Brennt": ["mp3", "4Mb", "Industrial"],
}
));
document.write("<ul>");
for (var i = 0; i < base.length; ++i) {
document.write("<li>" + base[i].artist + "</li>");
document.write("<ul>");
for (var j = 0; j < base[i].album.length; ++j) {
document.write("<li>" + base[i].album[j] + "</li>");
document.write("<ul>");
for (var h = 0; h < base[i].song.length; ++h) {
document.write("<li>" + base[i].song[h] + "</li>");
for (var t in base[i].attributes) {
if (t === base[i].song[h]) {
document.write("<ul>");
for (var g = 0; g < t.length; ++t) {
for (var f = 0; f < base[i].attributes[t].length; ++f) {
document.write("<li>" + base[i].attributes[t][f] + "</li>");
}
}
document.write("</ul>");
}
}
}
document.write("</ul>");
}
document.write("</ul>");
}
document.write("</ul>");
}());
Он рабочий.
Единственный момент, что хочу чтобы в пунктах "Reflections" и"Amplified" я были свои подпункты, а в таком варианте у них одни и те же элементы выводятся. Мог бы кто-нибудь помочь?
|
|
10.10.2016, 18:54
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
Goret,
так может
_album = [{title : "ttt", song : ["dddd","uuu"]},{title : "ttt", song : ["dddd","uuu"]}]
|
|
11.10.2016, 10:31
|
|
Интересующийся
|
|
Регистрация: 10.10.2016
Сообщений: 10
|
|
рони, нет все равно не работает, так тоже пробывыл
[{"Reflections":["No Education", "Prologue", "Faraway", "Somewhere Around Nothing"],
"Amplified":["Enter Sandman", "Harmageddon", "Nothing Else Matters"]}],
|
|
11.10.2016, 14:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
Goret,
примерно так ... не самое оптимальное дерево данных и функция, но для примера достаточно ... по красному можно кликать.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type='text/css'>
li > ul {
display: none;
}
li.opened > ul {
display: block;
}
.selfSwitcher {
color: red;
cursor: pointer;
}
.selfSwitcher > ul {
color: #0000FF;
cursor: default;
}
</style>
</head>
<body>
<script>
var data = [
{"text": "Пример",
"tag": "H4"},
{"text": "",
"tag": "UL",
"child": [{
"text": "Apocalyptica",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Reflections",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "No Education",
"tag": "LI"
}, {
"text": "Prologue",
"tag": "LI"
}, {
"text": "Faraway",
"tag": "LI"
}, {
"text": "Somewhere Around Nothing",
"tag": "LI"
}]
}]
}, {
"text": "Amplified",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Enter Sandman",
"tag": "LI"
}, {
"text": "Harmageddon",
"tag": "LI"
}, {
"text": "Nothing Else Matters",
"tag": "LI"
}]
}]
}]
}]
}, {
"text": "Rammstein",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Mutter",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Mein Herz Brennt",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "mp3",
"tag": "LI"
}, {
"text": "4Mb",
"tag": "LI"
}, {
"text": "Industrial",
"tag": "LI"
}]
}]
}, {
"text": "Links 234",
"tag": "LI"
}, {
"text": "Sonne",
"tag": "LI"
}, {
"text": "Ich Will",
"tag": "LI"
}]
}]
}]
}]
}]
}]
function recursiveList(c) {
return c.map(function(a) {
var b = document.createElement(a.tag);
a.text && b.appendChild(document.createTextNode(a.text));
a.child && recursiveList(a.child).forEach(function(a) {
b.appendChild(a)
});
a.child && "LI" == a.tag && (b.className = "selfSwitcher", b.addEventListener("click", function(a) {
a = a.target;
a == b && a.classList.toggle("opened")
}));
return b
})
};
data = recursiveList(data);
data.forEach(function(a) {
document.body.appendChild(a)
})
</script>
</body>
</html>
Последний раз редактировалось рони, 11.10.2016 в 14:25.
|
|
11.10.2016, 14:31
|
 |
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
|
|
|
|
|
