I'm trying to create a sort of wish list. By clicking a button / product it populates or deletes, if it already exists. However, I can not delete it, I can only include it. I tried using splice , but it only works with array. The problem is to use oldlist to do the comparison. I can not.
Follow the explanation in the code comments
//Essa é a minha oldlist, onde vou comparar com o que adicionar.
var oldlist = '[{"id":"2","name":"casa_3","image":"/teste_2.png","url":"/teste/te_2"}]';
//criando array vazio
var arrayList = [];
//funcao para gerar o objeto
function Employee(id, name, image, url) {
this.id = id;
this.name = name;
this.image = image;
this.url = url;
}
//detectando click no botao
// e obtendo os dados
$( ".btn" ).click(function() {
var id = $(this).data("id");
var name = $(this).data("name");
var image = $(this).data("image");
var url = $(this).data("url");
//criando objeto
var employeeObject1 = new Employee(id,name, image,url);
//populando
arrayList.push(employeeObject1);
//Agora eu tenho uma lista local
//e preciso comparar com a OLDLIST
//se ouver o objeto lá, no lugar de adicionar, eu preciso
//excluir
//1 - a old list tem o produto ID 2
//caso eu clique no botao do produto ID 3
// ELE FICARIA ASSIM:
/* '[
{"id":"2","name":"prod1","image":"/teste2.png","url":"/teste/te2"},{"id":"3","name":"prod3","image":"/teste3.png","url":"/teste/te3"} ]'
*/
//2 - Caso ele clique no botao do produto ID 2, que é o mesmo da lista OLD, ficará vazio, pois deverá haver uma exclusao
/*'[ ]'*/
document.getElementById("carrinho").innerHTML = JSON.stringify(arrayList);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttonclass="btn" data-id="1" data-name="prod1" data-image="/teste1.png" data-url="/teste/te1">Adicionar Produto 1</button>
<button class="btn" data-id="2" data-name="prod2" data-image="/teste2.png" data-url="/teste/te2">Adicionar Produto 1</button>
<button class="btn" data-id="3" data-name="prod3" data-image="/teste3.png" data-url="/teste/te3">Adicionar Produto 1</button>
<div id="carrinho"></div>