Insert field into table and compare if already exists, with Jquery

Question

Good morning! I am inserting products in a table with Jquery, similar to a shopping cart, and I need to compare if the product has not already been inserted before. I tried with the code below, but this giving problems when comparing with the array, where I’m going wrong?

var lista = [];
var i = 0;
$('#btn-adicionar').click(function(e) {
  if (lista.length > 0) {
    var id_produto = $('#id_produto').val();
    for (j = 0; j < lista.length; j++) {
      if (jQuery.inArray(id_produto, lista[j].id_produto) == -1) {
        lista[i] = {
          id_produto: $('#id_produto').val(),
          quantidade: $('#quantidade').val(),
          preco: $('#preco').val()
        };
        $('#tabela-adicionar').append("<tr><td>" + lista[i].id_produto + "</td><td>" + lista[i].quantidade + "</td><td>" + lista[i].preco + "</td></tr>");
      } else {
        alert("Produto ja inserido");
      }
    }
    i++;
  } else {
    lista[i] = {
      id_produto: $('#id_produto').val(),
      quantidade: $('#quantidade').val(),
      preco: $('#preco').val()
    };
    $('#tabela-adicionar').append("<tr><td>" + lista[i].id_produto + "</td><td>" + lista[i].quantidade + "</td><td>" + lista[i].preco + "</td></tr>");
    i++;
  }
  $('#id_produto').val("");
  $('#quantidade').val("");
  $('#preco').val("");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-adicionar">ADD</button>
<label>Produto:</label><input type="text" id="id_produto">
<label>Qtd:</label><input type="text" id="quantidade">
<label>Preco:</label><input type="text" id="preco">
<table>
  <thead>
    <tr>
      <td>Produto</td>
      <td>Quantidade</td>
      <td>Preço</td>
      <td>Remover</td>
    </tr>
  </thead>
  <tbody id="tabela-adicionar">
  </tbody>
</table>

Answer 1

Since you’re making a noose for, I don’t see much point in using inArray.

Another problem is the structure you created with this if within the for: as it is, whenever there is no occurrence, an entry will be added to the array, causing duplicate records to be inserted each time the if is equal to -1.

In this case, it would be better to check by for even, that even makes your code simpler. You won’t even need this counter i++. I created a flag achou that changes to true if a product already exists in the array.

Behold:

var lista = [];
$('#btn-adicionar').click(function(e) {
  if (lista.length > 0) {
    var id_produto = $('#id_produto').val();
    var achou = false;
    for(var j=0; j<lista.length; j++){
       if(lista[j].id_produto == id_produto){
          achou = true;
          break;
       }
    }
   if (!achou) {
     lista[lista.length] = {
       id_produto: $('#id_produto').val(),
       quantidade: $('#quantidade').val(),
       preco: $('#preco').val()
     };
     $('#tabela-adicionar').append("<tr><td>" + lista[lista.length-1].id_produto + "</td><td>" + lista[lista.length-1].quantidade + "</td><td>" + lista[lista.length-1].preco + "</td></tr>");
   } else {
     alert("Produto ja inserido");
   }
  } else {
    lista[0] = {
      id_produto: $('#id_produto').val(),
      quantidade: $('#quantidade').val(),
      preco: $('#preco').val()
    };
    $('#tabela-adicionar').append("<tr><td>" + lista[0].id_produto + "</td><td>" + lista[0].quantidade + "</td><td>" + lista[0].preco + "</td></tr>");
  }
  $('#id_produto').val("");
  $('#quantidade').val("");
  $('#preco').val("");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-adicionar">ADD</button>
<label>Produto:</label><input type="text" id="id_produto">
<label>Qtd:</label><input type="text" id="quantidade">
<label>Preco:</label><input type="text" id="preco">
<table>
  <thead>
    <tr>
      <td>Produto</td>
      <td>Quantidade</td>
      <td>Preço</td>
      <td>Remover</td>
    </tr>
  </thead>
  <tbody id="tabela-adicionar">
  </tbody>
</table>