Как сформировать дерево программно, с помощью цикла foreach?
Вложений: 2
Здравствуйте, у меня массив, состоящий из нескольких вложенных друг в друга элементов. Вручную я создала дерево из тегов ol, li, ul. Вот что у меня получилось.
Вложение 4789 В коде массив, выглядит вот так: Вложение 4790 Как создать этот массив программно, с помощью цикла foreach? При этом массив должен сам формироваться при запуске скрипта, если я добавляю дополнительные элементы. Мой код: |
Часть 1:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Создание дерево из объекта</title>
</head>
<body >
<div id="tree"></div>
<script>
var data = {
"response": [
{
"title":"test1",
"status":"current",
"text":"text1",
"Discription":"Описание1",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_1_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_1_1.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"774",
"height":"960",
"url":"https://site.ru/image/big_1_2.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_1_2.jpg"
}
}
]
},
{
"title":"test2",
"status":"wait",
"text":"text2",
"Discription":"Описание2",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_2_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_2_1.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_2_2.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_2_2.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_2_3.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_2_3.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_2_4.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_2_4.jpg"
}
}
]
},
{
"title":"test3",
"status":"wait",
"text":"text3",
"Discription":"Описание3",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_3_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_3_1.jpg"
}
}
]
},
{
"title":"test4",
"status":"wait",
"text":"text4",
"Discription":"Описание4",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_4_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_4_1.jpg"
}
}
]
},
{
"title":"test5",
"status":"wait",
"text":"text5",
"Discription":"Описание5",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_5_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_5_1.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_5_2.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_5_2.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_5_3.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_5_3.jpg"
}
}
]
},
{
"title":"test6",
"status":"wait",
"text":"text6",
"Discription":"Описание6",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_6_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_6_1.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_6_2.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_6_2.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_6_3.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_6_3.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_6_3.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_6_3.jpg"
}
}
]
},
{
"title":"test7",
"status":"wait",
"text":"text7",
"Discription":"Описание7",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_7_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_7_1.jpg"
}
}
]
},
{
"title":"test8",
"status":"wait",
"text":"text8",
"Discription":"Описание8",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_8_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_8_1.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_8_2.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_8_2.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_8_3.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_8_3.jpg"
}
}
]
},
....
|
Часть 2
{
"title":"test9",
"status":"wait",
"text":"text9",
"Discription":"Описание9",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_9_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_9_1.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_9_2.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_9_2.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_9_3.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_9_3.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_9_4.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_9_4.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_9_5.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_9_5.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_9_6.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_9_6.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_9_7.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_9_7.jpg"
}
}
]
},
{
"title":"test10",
"status":"wait",
"text":"test10",
"Discription":"Описание10",
"photo":[
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_10_1.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_10_1.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_10_2.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_10_2.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_10_3.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_10_3.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_10_4.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_10_4.jpg"
}
},
{
"big":
{
"status":"wait",
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_10_5.jpg"
},
"small":
{
"status":"wait",
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_10_5.jpg"
}
}
]
}
]
};
var posts = data["response"];
function make_tree() {
var tree = document.getElementById("tree");
//response
var cur_parent = document.createElement("ol");
var cur_element = document.createElement("li");
cur_element.innerHTML = "[response]";
//Уровень 0
var level0 = document.createElement("ul");
var data0 = document.createElement("li");
var sub_level0 = document.createElement("ul");
var title0 = document.createElement("li");
var status0 = document.createElement("li");
var text0 = document.createElement("li");
var desc0 = document.createElement("li");
var photo0 = document.createElement("li");
//Фото 1
var lvl0_photo0 = document.createElement("ul");
var L0_photo0 = document.createElement("li");
var lvl0_photo0_big = document.createElement("ul");
var L0_photo0_big = document.createElement("li");
var lvl0_photo0_big_data = document.createElement("ul");
var L0_photo0_big_status = document.createElement("li");
var L0_photo0_big_width = document.createElement("li");
var L0_photo0_big_height = document.createElement("li");
var L0_photo0_big_url = document.createElement("li");
////////////////
var lvl0_photo0_small = document.createElement("ul");
var L0_photo0_small = document.createElement("li");
var lvl0_photo0_small_data = document.createElement("ul");
var L0_photo0_small_status = document.createElement("li");
var L0_photo0_small_width = document.createElement("li");
var L0_photo0_small_height = document.createElement("li");
var L0_photo0_small_url = document.createElement("li");
//var L0_photo1 = document.createElement("li");
var lvl0_photo1 = document.createElement("ul");
var L0_photo1 = document.createElement("li");
var lvl0_photo1_big = document.createElement("ul");
var L0_photo1_big = document.createElement("li");
var lvl0_photo1_big_data = document.createElement("ul");
var L0_photo1_big_status = document.createElement("li");
var L0_photo1_big_width = document.createElement("li");
var L0_photo1_big_height = document.createElement("li");
var L0_photo1_big_url = document.createElement("li");
/////////////////
var lvl0_photo1_small = document.createElement("ul");
var L0_photo1_small = document.createElement("li");
var lvl0_photo1_small_data = document.createElement("ul");
var L0_photo1_small_status = document.createElement("li");
var L0_photo1_small_width = document.createElement("li");
var L0_photo1_small_height = document.createElement("li");
var L0_photo1_small_url = document.createElement("li");
//Уровень 1
var level1 = document.createElement("ul");
var data1 = document.createElement("li");
var sub_level1 = document.createElement("ul");
var title1 = document.createElement("li");
var status1 = document.createElement("li");
var text1 = document.createElement("li");
var desc1 = document.createElement("li");
var photo1 = document.createElement("li");
....
|
Часть 3:
var lvl1_photo0 = document.createElement("ul");
var L1_photo0 = document.createElement("li");
var lvl1_photo0_big = document.createElement("ul");
var L1_photo0_big = document.createElement("li");
var lvl1_photo0_big_data = document.createElement("ul");
var L1_photo0_big_status = document.createElement("li");
var L1_photo0_big_width = document.createElement("li");
var L1_photo0_big_height = document.createElement("li");
var L1_photo0_big_url = document.createElement("li");
var lvl1_photo1 = document.createElement("ul");
var L1_photo1 = document.createElement("li");
//SMALL
var lvl1_photo0_small = document.createElement("ul");
var L1_photo0_small = document.createElement("li");
var lvl1_photo0_small_data = document.createElement("ul");
var L1_photo0_small_status = document.createElement("li");
var L1_photo0_small_width = document.createElement("li");
var L1_photo0_small_height = document.createElement("li");
var L1_photo0_small_url = document.createElement("li");
////////BIG - 1
var lvl1_photo1_big = document.createElement("ul");
var L1_photo1_big = document.createElement("li");
var lvl1_photo1_big_data = document.createElement("ul");
//Уровень 2
var level2 = document.createElement("ul");
var data2 = document.createElement("li");
//Уровень 3
var level3 = document.createElement("ul");
var data3 = document.createElement("li");
//Уровень 4
var level4 = document.createElement("ul");
var data4 = document.createElement("li");
//Уровень 5
var level5 = document.createElement("ul");
var data5 = document.createElement("li");
//Уровень 6
var level6 = document.createElement("ul");
var data6 = document.createElement("li");
//Уровень 7
var level7 = document.createElement("ul");
var data7 = document.createElement("li");
//Уровень 8
var level8 = document.createElement("ul");
var data8 = document.createElement("li");
//Уровень 9
var level9 = document.createElement("ul");
var data9 = document.createElement("li");
//Уровень 10
var level10 = document.createElement("ul");
var data10 = document.createElement("li");
cur_parent.appendChild(cur_element);
//0
data0.innerHTML = "[0]";
level0.appendChild(data0);
level0.appendChild(sub_level0);
sub_level0.appendChild(title0);
title0.innerHTML = "[title] "+posts[0].title;
sub_level0.appendChild(status0);
status0.innerHTML = "[status] "+posts[0].status;
sub_level0.appendChild(text0);
text0.innerHTML = "[text] "+posts[0].text;
sub_level0.appendChild(desc0);
desc0.innerHTML = "[Description] "+posts[0].Discription;
sub_level0.appendChild(photo0);
photo0.innerHTML = "[photo]";
sub_level0.appendChild(lvl0_photo0);
lvl0_photo0.appendChild(L0_photo0);
L0_photo0.innerHTML = "[0]";
//desc0.innerHTML = "[Description] "+posts[0].Discription;
lvl0_photo0.appendChild(lvl0_photo0_big);
lvl0_photo0_big.appendChild(L0_photo0_big);
L0_photo0_big.innerHTML = "[big]";
lvl0_photo0_big.appendChild(lvl0_photo0_big_data);
// level -> 0 | photo -> 0 | big -> 0 | status
lvl0_photo0_big_data.appendChild(L0_photo0_big_status);
L0_photo0_big_status.innerHTML = "[status] "+posts[0].photo[0].big.status;
lvl0_photo0_big_data.appendChild(L0_photo0_big_width);
L0_photo0_big_width.innerHTML = "[width] "+posts[0].photo[0].big.width;
lvl0_photo0_big_data.appendChild(L0_photo0_big_height);
L0_photo0_big_height.innerHTML = "[height] "+posts[0].photo[0].big.height;
lvl0_photo0_big_data.appendChild(L0_photo0_big_url);
L0_photo0_big_url.innerHTML = "[url] "+posts[0].photo[0].big.url;
lvl0_photo0.appendChild(lvl0_photo0_small);
lvl0_photo0_small.appendChild(L0_photo0_small);
L0_photo0_small.innerHTML = "[small]";
lvl0_photo0_small.appendChild(lvl0_photo0_small_data);
lvl0_photo0_small_data.appendChild(L0_photo0_small_status);
L0_photo0_small_status.innerHTML = "[status] "+posts[0].photo[0].small.status;
lvl0_photo0_small_data.appendChild(L0_photo0_small_width);
L0_photo0_small_width.innerHTML = "[width] "+posts[0].photo[0].small.width;
lvl0_photo0_small_data.appendChild(L0_photo0_small_height);
L0_photo0_small_height.innerHTML = "[height] "+posts[0].photo[0].small.height;
lvl0_photo0_small_data.appendChild(L0_photo0_small_url);
L0_photo0_small_url.innerHTML = "[url] "+posts[0].photo[0].small.url;
//var lvl0_photo0_small = document.createElement("ul");
// var L0_photo0_small = document.createElement("li");
sub_level0.appendChild(lvl0_photo1);
lvl0_photo0.appendChild(L0_photo1);
L0_photo1.innerHTML = "[1]";
lvl0_photo1.appendChild(lvl0_photo1_big);
lvl0_photo1_big.appendChild(L0_photo1_big);
L0_photo1_big.innerHTML = "[big]";
lvl0_photo1_big.appendChild(lvl0_photo1_big_data);
lvl0_photo1_big_data.appendChild(L0_photo1_big_status);
L0_photo1_big_status.innerHTML = "[status] "+posts[0].photo[1].big.status;
lvl0_photo1_big_data.appendChild(L0_photo1_big_width);
L0_photo1_big_width.innerHTML = "[width] "+posts[0].photo[1].big.width;
lvl0_photo1_big_data.appendChild(L0_photo1_big_height);
L0_photo1_big_height.innerHTML = "[height] "+posts[0].photo[1].big.height;
lvl0_photo1_big_data.appendChild(L0_photo1_big_url);
L0_photo1_big_url.innerHTML = "[url] "+posts[0].photo[1].big.url;
//SMALL
lvl0_photo1.appendChild(lvl0_photo1_small);
lvl0_photo1_small.appendChild(L0_photo1_small);
L0_photo1_small.innerHTML = "[small]";
lvl0_photo1_small.appendChild(lvl0_photo1_small_data);
lvl0_photo1_small_data.appendChild(L0_photo1_small_status);
L0_photo1_small_status.innerHTML = "[status] "+posts[0].photo[1].small.status;
lvl0_photo1_small_data.appendChild(L0_photo1_small_width);
L0_photo1_small_width.innerHTML = "[width] "+posts[0].photo[1].small.width;
lvl0_photo1_small_data.appendChild(L0_photo1_small_height);
L0_photo1_small_height.innerHTML = "[height] "+posts[0].photo[1].small.height;
lvl0_photo1_small_data.appendChild(L0_photo0_small_url);
L0_photo1_small_url.innerHTML = "[url] "+posts[0].photo[1].small.url;
//1
data1.innerHTML = "[1]";
level1.appendChild(data1);
level1.appendChild(sub_level1);
sub_level1.appendChild(title1);
title1.innerHTML = "[title] "+posts[0].title;
sub_level1.appendChild(status1);
status1.innerHTML = "[status] "+posts[0].status;
sub_level1.appendChild(text1);
text1.innerHTML = "[text] "+posts[0].text;
sub_level1.appendChild(desc1);
desc1.innerHTML = "[Description] "+posts[0].Discription;
sub_level1.appendChild(photo1);
photo1.innerHTML = "[photo]";
sub_level1.appendChild(lvl1_photo0);
lvl1_photo0.appendChild(L1_photo0);
L1_photo0.innerHTML = "[0]";
lvl1_photo0.appendChild(lvl1_photo0_big);
lvl1_photo0_big.appendChild(L1_photo0_big);
L1_photo0_big.innerHTML = "[big]";
lvl1_photo0_big.appendChild(lvl1_photo0_big_data);
// level -> 0 | photo -> 0 | big -> 0 | status
lvl1_photo0_big_data.appendChild(L1_photo0_big_status);
L1_photo0_big_status.innerHTML = "[status] "+posts[1].photo[0].big.status;
lvl1_photo0_big_data.appendChild(L1_photo0_big_width);
L1_photo0_big_width.innerHTML = "[width] "+posts[1].photo[0].big.width;
lvl1_photo0_big_data.appendChild(L1_photo0_big_height);
L1_photo0_big_height.innerHTML = "[height] "+posts[1].photo[0].big.height;
lvl1_photo0_big_data.appendChild(L1_photo0_big_url);
L1_photo0_big_url.innerHTML = "[url] "+posts[1].photo[0].big.url;
//small
lvl1_photo0.appendChild(lvl1_photo0_small);
lvl1_photo0_small.appendChild(L1_photo0_small);
L1_photo0_small.innerHTML = "[small]";
lvl1_photo0_small.appendChild(lvl1_photo0_small_data);
lvl1_photo0_small_data.appendChild(L1_photo0_small_status);
L1_photo0_small_status.innerHTML = "[status] "+posts[1].photo[0].small.status;
lvl1_photo0_small_data.appendChild(L1_photo0_small_width);
L1_photo0_small_width.innerHTML = "[width] "+posts[1].photo[0].small.width;
lvl1_photo0_small_data.appendChild(L1_photo0_small_height);
L1_photo0_small_height.innerHTML = "[height] "+posts[1].photo[0].small.height;
lvl1_photo0_small_data.appendChild(L1_photo0_small_url);
L1_photo0_small_url.innerHTML = "[url] "+posts[1].photo[0].small.url;
....
|
Часть 4:
// lvl0_photo1_small.appendChild(lvl0_photo1_small_data);
//lvl0_photo1_small_data.appendChild(L0_photo1_small_status);
//L0_photo1_small_status.innerHTML = "[status] "+posts[0].photo[1].small.status;
//lvl0_photo1_small_data.appendChild(L0_photo1_small_width);
//L0_photo1_small_width.innerHTML = "[width] "+posts[0].photo[1].small.width;
// lvl0_photo1_small_data.appendChild(L0_photo1_small_height);
// L0_photo1_small_height.innerHTML = "[height] "+posts[0].photo[1].small.height;
//lvl0_photo1_small_data.appendChild(L0_photo0_small_url);
//L0_photo1_small_url.innerHTML = "[url] "+posts[0].photo[1].small.url;
///////////
sub_level1.appendChild(lvl1_photo1);
lvl1_photo1.appendChild(L1_photo1);
L1_photo1.innerHTML = "[1]";
lvl1_photo1.appendChild(lvl1_photo1_big);
lvl1_photo1_big.appendChild(L1_photo1_big);
L1_photo1_big.innerHTML = "[big]";
lvl1_photo1_big.appendChild(lvl1_photo1_big_data);
//2
data2.innerHTML = "[2]";
level2.appendChild(data2);
//3
data3.innerHTML = "[3]";
level3.appendChild(data3);
//4
data4.innerHTML = "[4]";
level4.appendChild(data4);
//5
data5.innerHTML = "[5]";
level5.appendChild(data5);
//6
data6.innerHTML = "[6]";
level6.appendChild(data6);
//7
data7.innerHTML = "[7]";
level7.appendChild(data7);
//8
data8.innerHTML = "[8]";
level8.appendChild(data8);
//9
data9.innerHTML = "[9]";
level9.appendChild(data9);
//10
data10.innerHTML = "[10]";
level10.appendChild(data10);
cur_parent.appendChild(level0);
cur_parent.appendChild(level1);
cur_parent.appendChild(level2);
cur_parent.appendChild(level3);
cur_parent.appendChild(level4);
cur_parent.appendChild(level5);
cur_parent.appendChild(level6);
cur_parent.appendChild(level7);
cur_parent.appendChild(level8);
cur_parent.appendChild(level9);
cur_parent.appendChild(level10);
tree.appendChild(cur_parent);
}
make_tree();
</script>
</body>
</html>
Внимание: объединив все куски, код будет работать. P.S. Ограничение в количестве символов на один пост. Пришлось вот так: |
Вложений: 1
Прикрепляю файл с кодом для скачивания:
Вложение 4791 |
дерево из объекта
Olga27,
не надо простыней, будьте лаконичней)))
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
let data = {
"response": [{
"title": "test1",
"status": "current",
"text": "text1",
"Discription": "Описание1",
"photo": [{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_1_1.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_1_1.jpg"
}
},
{
"big": {
"status": "wait",
"width": "774",
"height": "960",
"url": "https://site.ru/image/big_1_2.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_1_2.jpg"
}
}
]
},
{
"title": "test2",
"status": "wait",
"text": "text2",
"Discription": "Описание2",
"photo": [{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_1.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_1.jpg"
}
},
{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_2.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_2.jpg"
}
},
{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_3.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_3.jpg"
}
},
{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_4.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_4.jpg"
}
}
]
}
]
};
</script>
</head>
<body>
<div id="tree"></div>
<script>
function recursiveList(data) {
let html = Object.entries(data).map(([key, value]) => {
let type = typeof value;
let li = document.createElement("li");
li.textContent = `[${key}]`;
if (type === "object") {
let ul = document.createElement("UL");
value = recursiveList(value);
ul.append(...value);
li.append(ul);
} else {
li.textContent += ` ${value}`;
}
return li;
})
return html
}
let html = recursiveList(data);
tree.append(...html);
</script>
</body>
</html>
|
Olga27,
обновите страницу перед копированием, внесены правки. |
Все работает, а как изменить цвет параметра status, чтобы при построении дерева у wait, current и ok были разные цвета. Кроме того у дерева верхнего уровня были одни цета, а более низкого уровня картинки photo были другие цвета. Пример цветов в комментариях. Думаю сначала нужно придать этим узлам <li>, значение через setAttribute, а потом использовать стили?
.....
"response": [
{
"title":"test1",
"status":"current", //current --> #767474 | wait --> #E51012 | ok --> #1DDD32
"text":"text1",
"Discription":"Описание1",
"photo":[
{
"big":
{
"status":"wait", //current --> #808080 | wait --> #FF0000 | ok --> #00FF00
"width":"772",
"height":"960",
"url":"https://site.ru/image/big_1_1.jpg"
},
"small":
{
"status":"ok", //current --> #808080 | wait --> #FF0000 | ok --> #00FF00
"width":"105",
"height":"130",
"url":"https://site.ru/image/small_1_1.jpg"
}
},
.....
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
let data = {
"response": [{
"title": "test1",
"status": "current",
"text": "text1",
"Discription": "Описание1",
"photo": [{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_1_1.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_1_1.jpg"
}
},
{
"big": {
"status": "wait",
"width": "774",
"height": "960",
"url": "https://site.ru/image/big_1_2.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_1_2.jpg"
}
}
]
},
{
"title": "test2",
"status": "ok",
"text": "text2",
"Discription": "Описание2",
"photo": [{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_1.jpg"
},
"small": {
"status": "ok",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_1.jpg"
}
},
{
"big": {
"status": "current",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_2.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_2.jpg"
}
},
{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_3.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_3.jpg"
}
},
{
"big": {
"status": "wait",
"width": "772",
"height": "960",
"url": "https://site.ru/image/big_2_4.jpg"
},
"small": {
"status": "wait",
"width": "105",
"height": "130",
"url": "https://site.ru/image/small_2_4.jpg"
}
}
]
}
]
};
</script>
</head>
<body>
<div id="tree"></div>
<script>
const recursiveList = ((ul, li, data, color = {"current" : "#767474", "wait" : "#E51012", "ok" : "#1DDD32"}) => {
const html = Object.entries(data).map(([key, value]) => {
const item = li.cloneNode();
item.textContent = `[${key}]`;
if(key === "status") item.style.backgroundColor = color[value];
if(key === "photo") color = {"current" : "#808080", "wait" : "#FF0000", "ok" : "#00FF00"};
value = (typeof value === "object") ? recursiveList(value, color) : ` ${value}`;
item.append(value);
return item;
});
const list = ul.cloneNode();
list.append(...html);
return list;
}).bind(null, document.createElement("UL"), document.createElement("li"));
const html = recursiveList(data);
tree.append(html);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:17. |