27.08.2022, 21:14
|
|
Аспирант
|
|
Регистрация: 10.06.2021
Сообщений: 49
|
|
|
Как сравнить id массива с id json и закрасить элемент если id совпадают?
Здравствуйте, мне нужно покрасить те элементы в json если в массиве присутствует похожий id. К примеру id поста и id фотографии. Только если дело касается поста, то зеленым цветом закрасить title, в случае фото зеленым цветом покрасить [photo].
postid.jpg
Id поста
Массив: console.log("posts=>"+data["response"][0]["id"]);
Json console.log("posts=>"+posts["items"][0]["id"]);
Id фото:
Массив: console.log("attachment=>"+data["response"][0]["photo"][0]["big"]["id"]);
Json: console.log("attachment=>"+posts["items"][0]["attachments"][0]["photo"]["id"]);
<!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"}
}]}
]
};
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"));
function init()
{
Index1 = 0;
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);
tree.innerHTML = "";
const html = recursiveList(jsontent);
tree.append(html);
output.innerHTML = "<strong>"+bool+"</strong> " + i +" == "+Index1;
posts = jsontent["response"];
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);
},1000);
}
init();
</script>
</body>
</html>
Исходники:
example.zip
|
|
30.08.2022, 11:14
|
|
Аспирант
|
|
Регистрация: 10.06.2021
Сообщений: 49
|
|
Я нашла решения. Построение дерева будет создаваться отдельно, а закрашивание элементов списка отдельно. Пришлось добавить отдельный атрибут 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>
|
|
30.08.2022, 11:24
|
|
Аспирант
|
|
Регистрация: 10.06.2021
Сообщений: 49
|
|
Вот также мои исходники:
example1.zip
Я понимаю что мой код не слишком хороший в плане оптимизации. Поэтому допускаю другие варианты и возможно кто-то покажет и объяснит, как сделать лучше.
|
|
|
|
