|
Сообщение от Olga27
|
|
у wait, current и ok были разные цвета. Кроме того у дерева верхнего уровня были одни цета, а более низкого уровня картинки photo были другие цвета.
|
оттенки еле уловимые, вашему зрению можно позавидовать)))
<!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>