Я нашла решения. Построение дерева будет создаваться отдельно, а закрашивание элементов списка отдельно. Пришлось добавить отдельный атрибут param с идентификатором, чтобы на него ссылаться вот мой код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Example Json</title>
<style>
body {
font-family: sans-serif;
}
#output{background-color:rgba(194,194,194,0.6);position:fixed;top:15px;right:115px;z-index:2;}
</style>
</head>
<body>
<div id="output">
<strong>true</strong>
</div>
<div id="tree"></div>
<script>
var bool = false;
var Index1 = 0;
var jsontent;
var bool = false;
var posts;
var output = document.getElementById('output');
var i = 0;
let data = {
"response":[
{
"title":"Пост № 1",
"status":"current",
"id":2323866,
"text":"Тут должен появиться ёжик!",
"photo":[
{
"big":
{
"status":"current",
"width":772,
"height":960,
"url":"https://site.ru/image/big_1_1.jpg",
"id":457370052,
"post_id":2323866
},
"small":
{
"status":"wait",
"width":105,
"height":130,
"url":"https://site.ru/image/small_1_1.jpg"
}
}
]
},
{
"title":"Пост № 1",
"status":"current",
"id":2323832,
"text":"Тут должен появиться ёжик!",
"photo":[
{
"big":
{
"status":"current",
"width":772,
"height":960,
"url":"https://site.ru/image/big_1_1.jpg",
"id":457370512,
"post_id":2323866
},
"small":
{
"status":"wait",
"width":105,
"height":130,
"url":"https://site.ru/image/small_1_1.jpg"
}
}
]
},
{
"title":"Пост № 2",
"status":"wait",
"id":2323856,
"text":"Прирoдa творит чудеса\n\nБерегите животных",
"photo":[
{
"big":
{
"status":"wait",
"width":728,
"height":712,
"url":"https://site.ru/image/big_2_1.jpg",
"id":457370045,
"post_id":2323856
},
"small":
{
"status":"wait",
"width":130,
"height":127,
"url":"https://site.ru/image/small_2_1.jpg"}
},
{
"big":
{
"status":"wait",
"width":728,
"height":728,
"url":"https://site.ru/image/big_2_2.jpg",
"id":457370046,"post_id":2323856
},
"small":
{
"status":"wait",
"width":130,
"height":130,
"url":"https://site.ru/image/small_2_2.jpg"}
},
{
"big":
{
"status":"wait",
"width":755,
"height":943,
"url":"https://site.ru/image/big_2_3.jpg",
"id":457370047,"post_id":2323856
},
"small":
{
"status":"wait",
"width":104,
"height":130,
"url":"https://site.ru/image/small_2_3.jpg"
}
}]}
]
};
var i = 0;
const recursiveList = ((ul, li, data, color = {"2323866" : "#1DDD32", "wait" : "#E51012", "ok" : "#1DDD32"}) => {
const html = Object.entries(data).map(([key, value]) => {
const item = li.cloneNode();
item.textContent = `[${key}]`;
output.innerHTML = li;
i++;
//console.log(value);
if(key === "id")
{
}
if(key === "photo") color = {"current" : "#808080", "wait" : "#FF0000", "ok" : "#00FF00"};
value = (typeof value === "object") ? recursiveList(value, color) : ` ${value}`;
item.setAttribute("param", value);
item.append(value);
return item;
});
const list = ul.cloneNode();
list.append(...html);
return list;
}).bind(null, document.createElement("UL"), document.createElement("li"));
function init()
{
Index1 = -1;
bool = true;
//var timer = setTimeout(function ajaxQuery(){
var ajaxhttp = new XMLHttpRequest();
var url = "./data.json";
ajaxhttp.open("GET",url,true);
ajaxhttp.setRequestHeader("content-type","application/json");
ajaxhttp.onreadystatechange = function(){
if(ajaxhttp.readyState == 4 && ajaxhttp.status == 200){
jsontent = JSON.parse(ajaxhttp.responseText);
posts = jsontent["response"];
tree.innerHTML = "";
const html = recursiveList(jsontent);
tree.append(html);
posts["items"].forEach(function(item2, i1, arr)
{
data["response"].forEach(function(item, i, arr)
{
if(item["id"]===item2["id"])
{
var t = document.querySelector('[param=" '+item["id"]+'"]');
t.style.backgroundColor = "#1DDD32";
}
if(typeof item2["attachments"] === "object")
{
item2["attachments"].forEach(function(item3, i, arr)
{
if(typeof item["photo"] === "object")
{
item["photo"].forEach(function(item4, i, arr)
{
if(item3["photo"]["id"]===item4.big["id"])
{
var t = document.querySelector('[param=" '+item3["photo"]["id"]+'"]');
t.style.backgroundColor = "#1DDD32";
}
});
}
});
}
});
});
console.log("-------------------------------------------");
console.log("posts=>"+posts["items"][0]["id"]);
console.log("attachment=>"+posts["items"][0]["attachments"][0]["photo"]["id"]);
console.log("posts=>"+data["response"][0]["id"]);
console.log("attachment=>"+data["response"][0]["photo"][0]["big"]["id"]);
console.log("-------------------------------------------");
}
}
ajaxhttp.send();
}
init();
</script>
</body>
</html>