Но querySelectorAll только что созданного списка можно как-то вызвать? При по пытке это сделать, я получаю "NodeList" без каких-либо данных.
<!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":"Пост № 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"
}
},
{
"big":
{
"status":"wait",
"width":728,
"height":409,
"url":"https://site.ru/image/big_2_4.jpg",
"id":457370048,
"post_id":2323856
},
"small":
{
"status":"wait",
"width":130,
"height":73,
"url":"https://site.ru/image/small_2_4.jpg"
}
},
{
"big":
{
"status":"wait",
"width":728,
"height":656,
"url":"https://site.ru/image/big_2_5.jpg",
"id":457370049,
"post_id":2323856
},"small":{"status":"wait","width":130,"height":117,"url":"https://site.ru/image/small_2_5.jpg"}
}]}
]
};
/*
var recursiveList = (function(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}]`;
console.log(key);
if(key === "attachments") 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"));
//alert(factorial(5));
*/
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.setAttribute("param", value);
item.textContent = `[${key}]`;
output.innerHTML = li;
i++;
//console.log(i);
if(key === "id")
{
}
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"));
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"];
data["response"].forEach(function(item, i, arr)
{
posts["items"].forEach(function(item2, i1, arr)
{
if(item["id"]===item2["id"])
{
console.log(item["photo"]);
}
});
});
tree.innerHTML = "";
const html = recursiveList(jsontent);
tree.append(html);
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();
//setTimeout(ajaxQuery,1000);
var matches = document.querySelectorAll("li");
//NodeList
console.log(matches);
}
init();
</script>
</body>
</html>
