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

[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

[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]