Всем привет!
Мучаюсь с проблемой одновременного рендера.. Пытаюсь одновременно рендерить карточки товара, добавленные в список по id и отрисовывать смену цвета шрифта у тех которые уже выбраны и проблема заключается в том, что кто первый отрендерился того и тапки..
Сам файл wishlist.js:
document.querySelectorAll('.add-to-wishlist').forEach(function (element) {
element.onclick = addToWishlist;
});
function addToWishlist() {
let goodsId = this.dataset.goods_id;
if (wishlist[goodsId]) {
wishlist[goodsId]++;
}
else {
wishlist[goodsId] = 1;
}
ajaxGetGoodsInfo();
}
if (localStorage.getItem('wishlist')) {
wishlist = JSON.parse(localStorage.getItem('wishlist'));
ajaxGetGoodsInfo();
}
function ajaxGetGoodsInfo() {
updateLocalStorageWishlist();
fetch('/get-wishlist', {
method: 'POST',
body: JSON.stringify({ key: Object.keys(wishlist) }),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
.then(function (response) {
return response.text();
})
.then(function (body) {
let goodsid = JSON.parse(body);
showWishlist(goodsid);
})
}
function showWishlist(data) {
let out = '<div class="container">';
out += `<div class='row'>`;
data.forEach(function(entry) {
out += `<div class="col col-md-3">`;
out += `<div class="card">`;
out += `<div class="product-img">`;
out += `<a href="goods/${entry.id}">`;
out += `<img src="/images/goods/${entry.id}.png"></img></a>`;
out += `</div>`;
out += `<div class="product-list">`;
out += `<h3> ${entry.name}</h3>`;
out += `<div class="stars"></div>`;
out += `<span class="price">`;
out += `<h6> ₽ ${entry.price}<h6></span>`;
out += `<div class="actions">`;
out += `<div class="add-to-cart">`;
out += `<button data-goods_id = val["id"] class="button button-primary add-to-cart">`;
out += `<i class="fa fa-shopping-cart" aria-hidden="true"></i></button>`;
out += `</div>`;
out += `<div class="add-to-links">`;
out += `<button class="button button-primary"><a href="#" onclick="window.location.reload();">`;
out += `<i class="far fa fa-times wishlist-del btn-blk" data-goods_id="${entry.id}"></i></a></button>`;
out += `</div>`;
out += `</div>`;
out += `</div>`;
out += `</div>`;
out += `</div>`;
});
out += `</div>`;
out += `</div>`;
document.querySelector('#wishlist-nav').innerHTML = out;
document.querySelectorAll('.wishlist-del').forEach(function (element) {
element.onclick = wishlistDel;
});
}
function wishlistDel() {
let goodsId = this.dataset.goods_id;
delete (wishlist[goodsId]);
ajaxGetGoodsInfo();
}
function updateLocalStorageWishlist() {
localStorage.setItem('wishlist', JSON.stringify(wishlist));
}
Код на стороне сервера:
app.post('/get-wishlist', function (req, res) {
if (req.body.key.length != 0) {
let goodslist = {};
goodslist = [];
for (key in data.КоммерческаяИнформация.Каталог.Товары.Товар) {
req.body.key.forEach(function(entry) {
let id = data.КоммерческаяИнформация.Каталог.Товары.Товар[key].Ид._text;
let name = data.КоммерческаяИнформация.Каталог.Товары.Товар[key].Наименование._text;
if (id == entry) {
for (key in data1.КоммерческаяИнформация.ПакетПредложений.Предложения.Предложение) {
if (data1.КоммерческаяИнформация.ПакетПредложений.Предложения.Предложение[key].Ид._text==id) {
let price = data1.КоммерческаяИнформация.ПакетПредложений.Предложения.Предложение[key].Цены.Цена.ЦенаЗаЕдиницу._text;
let count = data1.КоммерческаяИнформация.ПакетПредложений.Предложения.Предложение[key].Количество._text;
let inf = new Object();
inf.id = id;
inf.name = name;
inf.price = price;
goodslist.push(inf);
}
}
}
});
}
res.json(goodslist);
}
else {
res.send('0');
}
});
Код для смена цвета использую:
let elem = document.getElementById(entry.id);
elem.style.color = '#FF0000';