Помогите онайти ошибку в бновлении данных

[Zamay]

Данные приходят с сервера (пользователи). Если такой пользователь уже есть ( выведен), то ничего не делать , если нету , то добавить в конец ( а лучше в начало ) списка. И обновлять через 2-3 секунды.

У меня после обновления , все добавляется в конец списка( списка пользователи) и выходи так , что пользователи одинаковые - повторяются ... и опять и опять ...
Помогите это исправить ) Спасибо

Вот онлайн - раскомментировать // setInterval(users, 4000);
http://codepen.io/Zamay/pen/egbONw?editors=1010

function users() {
$.ajax({
type: 'GET',
url: 'https://main-workspace-juggerr.c9users.io:8081/user',
success: function (data) { // Обработчик успешного ответа

$.parseJSON(JSON.stringify(data)).forEach(
function (obj) {
console.log(obj)
if (obj.username != "" || obj.user_id != "" ) {
var users = document.querySelector('.list_user');
var userId = obj.user_id;

if ($('.list_user a').attr('href').replace('#', '') == userId) {
console.log("1");
//не выводить

} else {
console.log("2");
var ul = document.querySelector(".list_user");
ul.lastElementChild.innerHTML += `<li><a href = #${obj.user_id} class="user">${obj.username} </a></li>`;
}
}
}
)
setInterval(users, 4000);
console.log("3");
},
error: function (data, status) { // Обработчик ответа в случае ошибки
console.error(data, status);
}
});
}
users();

[рони]

Zamay,
var userAll = {};
function users() {
$.ajax({
type: 'GET',
url: 'https://main-workspace-juggerr.c9users.io:8081/user',
success: function (data) { // Обработчик успешного ответа

$.parseJSON(JSON.stringify(data)).forEach(
function (obj) {
console.log(obj)
if (obj.username != "" || obj.user_id != "" ) {
var users = document.querySelector('.list_user');
var userId = obj.user_id;

if (!userAll[userId]){
userAll[userId] = true
var ul = document.querySelector(".list_user");
ul.lastElementChild.innerHTML += `<li><a href = #${obj.user_id} class="user">${obj.username} </a></li>`;
}
}
}
)
setInterval(users, 4000);
console.log("3");
},
error: function (data, status) { // Обработчик ответа в случае ошибки
console.error(data, status);
}
});
}
users();

[Zamay]

рони, спасибо.
Теперь понятно ! Надо было в массив записывать ( как я понял )
Но такой вопрос - в консоле , после каждого обновление запроса - вывод console.log("3") увеличивается в 2 раза .
3
(2) 3
(4) 3
(8) 3
(16) 3
...
И через 30 сек сайт лежит. Приходиться вкладку закрывать и заново открывать ! Почему так ?

[рони]

Zamay,
потому что вы умножаите интервалы setInterval замените на setTimeout или уберите из функции

[Zamay]

Спасибо еще раз )
А можешь еще посмотреть ... Я делаю как ты , но вот на innerHTML ругается . не знаю ,на что можно заменить (
https://codepen.io/Zamay/pen/egbONw?editors=1010

var messagesAll = {};
function messages() {
$.ajax({
type: 'GET',
url: 'https://main-workspace-juggerr.c9users.io:8081/messages',
success: function (data) { // Обработчик успещного ответа

$.parseJSON(JSON.stringify(data)).forEach(
function (obj) {
if (obj.user_id != undefined) {
var messages = document.querySelector('.wrap-tab-content');
var userId = obj.user_id;
var message = messages.querySelector('#' + userId);

if (messagesAll[message]) {
messagesAll[message] = false;
messages.querySelector('#' + userId).innerHTML += `<p><b>${obj.user_id}:</b> ${obj.message}</p>`;
} else {
messagesAll[message] = true;
var newDiv = document.createElement('div');
newDiv.id = obj.user_id;
newDiv.innerHTML = `<p><b>${obj.user_id}:</b> ${obj.message}</p>`;
messages.appendChild(newDiv);
}
}
}
)
},
error: function (data, status) { // Обработчик ответа в случае ошибки
console.error(data, status);
}
});
}
setInterval(messages, 1000);

[рони]

Zamay,
может на новый формат замены ругается а не на innerHTML не все поддерживают ещё
а так insertAdjacentHTML (https://learn.javascript.ru/multi-insert)

[Zamay]

рони,

"Cannot read property 'innerHTML' of null "
"Cannot read property 'insertAdjacentHTML' of null "

[рони]

Zamay,
messagesAll[message] каков был смысл менять предложенный вам вариант с userId ?

[Zamay]

рони, если я правильно понял ваш вопрос - то у меня 2 функции: одна получает пользователь , а вторая сообщения !
У меня изначально была такая функция, но она тоже не правильно обновляется( как и users () ). Решил переделать как вы скинули. Но не получилось. Прошу помощь еще разок )

function messages() {
$.ajax({
type: 'GET',
url: 'http://192.168.1.169:8081/messages',
success: function (data) { // Обработчик успещного ответа

$.parseJSON(JSON.stringify(data)).forEach(
function (obj) {
if (obj.user_id != undefined) {
var messages = document.querySelector('.wrap-tab-content');
var userId = obj.user_id;
var message = messages.querySelector('#' + userId);

if (message) {
messages.querySelector('#' + userId).innerHTML += `<p><b>${obj.user_id}:</b> ${obj.message}</p>`;
} else {
var newDiv = document.createElement('div');
newDiv.id = obj.user_id;
newDiv.innerHTML = `<p><b>${obj.user_id}:</b> ${obj.message}</p>`;
messages.appendChild(newDiv);
}
}
}
)
},
error: function (data, status) { // Обработчик ответа в случае ошибки
console.error(data, status);
}
});
}
//setInterval(messages, 4000);

[рони]

Zamay,
пост 5 -- надо не messagesAll[message] везде а messagesAll[userId]

[Zamay]

рони,
Если есть такое сообщение , оно все равно добавляется !

Работает ,но почему messagesAll[userId] ? Я знаю, что мне еще учиться и учиться. Но все же , можешь тогда объяснить ?

var messagesAll = {};
function messages() {
$.ajax({
type: 'GET',
url: 'http://192.168.1.169:8081/messages',
success: function (data) { // Обработчик успешного ответа

$.parseJSON(JSON.stringify(data)).forEach(
function (obj) {
if (obj.user_id != undefined) {
var messages = document.querySelector('.wrap-tab-content');
var userId = obj.user_id;
var messag = messages.querySelector('#' + userId);

if (messagesAll[userId]) {
messagesAll[userId] = false;
messages.querySelector('#' + userId).innerHTML += `<p><b>${obj.user_id}:</b> ${obj.message}</p>`;
} else {
messagesAll[userId] = true;
var newDiv = document.createElement('div');
newDiv.id = obj.user_id;
newDiv.innerHTML = `<p><b>${obj.user_id}:</b> ${obj.message}</p>`;
messages.appendChild(newDiv);
}
}
}
)

},
error: function (data, status) { // Обработчик ответа в случае ошибки
console.error(data, status);
}
});
}
setInterval(messages, 4000)

[рони]

Zamay,
зачем строка 16 нужна ? может убрать?
почему messagesAll[userId]
потому что var messag обьект -- и он не может быть индивидуальным ключом для обьекта messagesAll -- потому что ключ это строка --- а все обьекты при переводе в строку одинаковы

[Zamay]

Ладно ) Надо еще думать , что не так ! Да и не правильно изначально проверяю условие ... по дате отправке надо.. Ну ладно.
Спасибо !