Как вывести массив в div?

Question

[Jesse Pinkman]

Привет!
Есть такой пример - https://jsfiddle.net/b2z3L760/1/

Массив какими-то данными

const arr = [
	{id: 850, name: 'hello'},
	{id: 851, name: 'world'},
	{id: 852, name: 'hello'},
	{id: 853, name: 'john'},
	{id: 854, name: 'putin'},
];

Далее рендерим в .list эти элементы

spoiler

arr.forEach(item => {
	$('.list').append(`
  	<span class="green" id="${item.id}">${item.name} id:${item.id}</sapn>
  `);
});

После чего обновляем массив, удаляем какую-то запись и добавляем новую.

spoiler

arr.splice(3, 1);
arr.push({id: 888, name: 'rov'});

Теперь нужно удалить лишние элементы на странице и добавить новые, как что бы id в массиве совпадали с id элементов в list. Как это можно сделать ? Мне пришло в голову только одна идея, это полностью очищать list и заново все выводить. Но мне кажется есть вариант куда лучше. Буду благодарен и рад помощи! Мир вам.

Answer 1

[WapSter]

По такому же принципу можно сделать и добавление. И аккуратно splice мутирует исходный массив, погугли что это значит, бывает критично

Answer 2

[Jesse Pinkman]

Вот так решил, если кому-то интересно, но порожнему, Вы все еще можете предложить свой вариант и я буду рад и благодарен Вам!

demo: https://jsfiddle.net/s4fqpLgc/ (если нажать на кнопку, то добавляется элемент с рандомным id, раньше если бы мы добавили еще один, то предыдущий элемент изменился так-как был-бы перендер всех элементов, но с данным решением - нет

js

const arr = [
    {id: 850, name: 'hello'},
    {id: 851, name: 'world'},
    {id: 852, name: 'hello'},
    {id: 853, name: 'john'},
    {id: 854, name: 'putin'},
];

function render() {
    // .in-cart - класс модификатор, им мы будем помечать элементы которые уже имеются  на странице


    //сперва удаляем класс у всех элементов 
    $('.item').removeClass('in-cart');
  
  arr.forEach(item => {
     //помечаем элементы которые уже были отрендерены  
     $(`.item[data-id="${item.id}"]`).addClass('in-cart');
    
    //если элемента нет, то рендерим его
    if($(`.item[data-id="${item.id}"]`).length == 0) { 
       $('.list').append(`
        <span class="item in-cart" data-id="${item.id}">${item.name} id:${item.id}</sapn>
      `);
    }
  });
 
  //проходим по всем **не** помеченным элементам, так-как они лишние - удаляем 
  $('.item').each(function(){
    if(!$(this).hasClass('in-cart')) {
      $(this).remove();
    }
  });

}

render();

arr.splice(3, 1);
arr.push({id: 888, name: 'rov'});

render();
console.log(arr)

$('.add').click(function(){
    var id = Math.floor(Math.random() * 500);
    arr.push({id: id, name: 'new ' + id});
  render();
});
console.log(arr)

В итоге мы рендерим только новые элементы и избавляемся от надобности рендерит элементы снова. Это особенно помогает, когда у вас там инпуты, которы вы заполнили, потом добавили еще один элемент, а из-за того что оно рендерится снова все инпуты сбрасываются.

Ответ WapSter в целом тоже решает проблему, но я решил изменить логику немного.