Остановить дублирование вставленных элементов

Question

Я пытаюсь добавить объект элементов внутрь в родительский div. Я выбираю элемент, он обновляет объект, а затем объект вставляет на страницу. Однако это только добавляет к родительскому div и не очищает и повторно вставляет (или даже лучше, вставляет последний элемент в div).

Так скажем, у меня есть это на моей странице в виде списка:

var selectedItemQueue = [ 
    { 
     "market_hash_name":"Chroma 2 Case Key 1", 
     "assetid":"92700754417_143965972", 
     "amount":1, 
     "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/" 
    }, 
    { 
     "market_hash_name":"Chroma 2 Case Key 2", 
     "assetid":"92700754667_143865972", 
     "amount":1, 
     "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/" 
    }, 
    { 
     "market_hash_name":"Shadow Case Key 3", 
     "assetid":"1293611210722_143865972", 
     "amount": 2, 
     "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiePrKF4wi6aaIGwStN_jl4bSzvXwMO6AwDlSvsYoiOiZ8dij3QbtqkU9ZnezetFWWxusZg/" 
    } 
]; 

И я выбрал новый пункт, который присоединяет к selectedItemQueue объекта.

var selectedItemQueue = [ 
    { 
     "market_hash_name":"Chroma 2 Case Key 1", 
     "assetid":"92700754417_143965972", 
     "amount":1, 
     "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/" 
    }, 
    { 
     "market_hash_name":"Chroma 2 Case Key 2", 
     "assetid":"92700754667_143865972", 
     "amount":1, 
     "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOie3rKFRh16PKd2pDvozixtSOwaP2ar7SlzIA6sEo2rHCpdyhjAGxr0A6MHezetG0RZXdTA/" 
    }, 
    { 
     "market_hash_name":"Shadow Case Key 3", 
     "assetid":"1293611210722_143865972", 
     "amount": 2, 
     "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiePrKF4wi6aaIGwStN_jl4bSzvXwMO6AwDlSvsYoiOiZ8dij3QbtqkU9ZnezetFWWxusZg/" 
    }, 
    { 
     "market_hash_name":"Shadow Case Key 4", 
     "assetid":"123393510722_143861972", 
     "amount":1, 
     "image":"https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXX7gNTPcUxuxpJSXPbQv2S1MDeXkh6LBBOiePrKF4wi6aaIGwStN_jl4bSzvXwMO6AwDlSvsYoiOiZ8dij3QbtqkU9ZnezetFWWxusZg/" 
    } 
]; 

Это код, который в значительной степени обрабатывает все заявки:

// inserts items to page 

function insertInventoryList(inventory, elem) { 
    var elem = $(elem); 
    for (var i = inventory.length - 1; i >= 0; i--) { 
     var itemElem = itemTemplate(inventory[i].market_hash_name, inventory[i].assetid, inventory[i].image, inventory[i].amount); 
     elem.append(itemElem); 
    }; 
} 

function itemTemplate(marketName, assetId, itemImage, itemAmount) { 
    var template = 
     '<div class="inventory-item" title="' + marketName + '" data-item-id="' + assetId + '" data-amount="' + itemAmount + '">' + 
      '<img class="inventory-item-image" src="' + itemImage + '" alt="' + marketName + '" width="95px" height="95px"> ' + 
     '</div>'; 
    return template; 
} 

function addItemToSelectedQueue(assetId){ 
    var itemObj = findItemById(assetId); 
    var queueHasItem = false; 
    for (var i = 0; i < selectedItemQueue.length; i++) { 
     if (selectedItemQueue[i].assetid === itemObj.assetid) { 
      queueHasItem = true; 
      if (itemObj.amount > 1) { 
       selectedItemQueue[i].amount++; 
       console.log(inventory.assetid[itemObj.assetId].marketName); 
      } 
     } 
    }; 
    if (!queueHasItem) { 
     selectedItemQueue.push(itemObj); 
     updateSelecteditems(); 
    } 
} 

function updateSelecteditems() { 
    insertInventoryList(selectedItemQueue, '#selected-items'); 
} 

Сейчас этот код просто добавляет к странице, но добавляет к переменной правильно.

Теперь есть еще одна вещь, которую я пытаюсь выяснить, которая может решить мою проблему. Каждый объект ребенок имеет этот ключ:

"amount":1 

Значение может измениться, и я хотел бы обновить это значение в selectedItemQueue, а также атрибут элемента элемента data-amount. Я думал, что это как-то связано с исправлением моей проблемы, но я не уверен, как это сделать. Любой совет?

Спасибо.

Чтобы уточнить, я пытаюсь вставить список элементов в родительский элемент, список из объекта, однако при добавлении новых объектов к объекту он также добавляется к div, а не просто вставляет новый товар.

Answer 1

function updateSelecteditems() { 
 
    $('#selected-items').empty(); 
 
    insertInventoryList(selectedItemQueue, '#selected-items'); 
 
}

Попробуйте это, он будет опорожнить DOM, а затем повторно добавить каждый из них.

Замечу, однако, что ваш код будет быстро усложняться, когда вы будете смешивать свои слои презентации и данных, как вы здесь.

Я бы попытался отделить проблемы немного здесь, если бы я был вами. Только мои 2 цента, хотя ... если дело только в том, чтобы заставить его работать быстро, тогда код моего брата! :)