Проблема рендера Node.js
Всем привет! :help: Мучаюсь с проблемой одновременного рендера.. Пытаюсь одновременно рендерить карточки товара, добавленные в список по 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'; |
Часовой пояс GMT +3, время: 05:43. |