How to remove an object from an array, if it exists, with json string

Question

I’m trying to create a kind of wish list. By clicking on a button/product it populates or excludes, if it already exists. However, I cannot exclude, I can only include. I tried to use the splice, but only works with array. The problem is using the oldlist to make the comparison. I cannot.

---

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>
<button class="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>

Answer 1

Dude you can use the lodash

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="lodash.js"></script>
<button class="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>
<script>
    //Essa é a minha oldlist, onde vou comparar com o que adicionar.

    var oldlist = JSON.parse('[{"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);

        newItem = _.filter(oldlist, function (item) {
            return item.id == employeeObject1.id
        });

        if(newItem.length > 0){
            oldlist = _.filter(oldlist, function (item) {
                return item.id != newItem[0].id
            });
        }else{
            oldlist.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(oldlist);

    });
</script>

Answer 2

Since the test of existence is based on the id can use map to catch him only the id and indexOf. This gives -1 if there is no or a positive index when there is.

Example:

//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"}]'; 

document.getElementById("carrinho").innerHTML = oldlist;

//representação em array da oldlist
var arrayList = JSON.parse(oldlist);

//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").toString(); //em string para coincidir com o json
  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);
 
  let index = arrayList.map(x=>x.id).indexOf(id); //apanhar o indice com map e indexOf
  if (index === -1){ //se não existe adiciona
    arrayList.push (employeeObject1);
  }
  else { //se existe remove
    arrayList.splice(index,1);
  }

  oldlist = JSON.stringify(arrayList); //aplica a alteração na oldlist
  
  //escreve o atualizado no html
  document.getElementById("carrinho").innerHTML = oldlist; 
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="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 2</button>
<button class="btn" data-id="3" data-name="prod3" data-image="/teste3.png" data-url="/teste/te3">Adicionar Produto 3</button>

<div id="carrinho"></div>