To filter array values it already exist to show alert box with msg?-CodePudding

The task is to filter array values is already exist to filter duplicate value then show a alert box with msg otherwise to add data then append table.

please give some solution or tips guys.

function pushData() {
  const products = [];
  const data = {
    id: document.getElementById('id').value,
    name: document.getElementById('name').value,
    qty: document.getElementById('qty').value,
    price: document.getElementById('price').value,
    total: document.getElementById('total').value

  }
  products.push(data);
  $.each(products, function(key, value) {
    $('#display').append(`
        <tr>
        <td>${value.id}</td>
        <td>${value.name}</td>
        <td>${value.qty}</td>
        <td>${value.price}</td>
        <td>${value.total}</td>
        </tr>`)
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div style="background-color:pink ;">
  <label for="id">ID</label>
  <input style="display:block" type="number" id="id"  /></br>
  
  <label>NAME:</label>
  <input style="display:block" type="Name" id="name" ></br>
  
  <label for="qty">QTY:</label>
  <input style="display:block" type="Qty" id="qty"  /></br>
  
  <label for="price">PRICE:</label>
  <input style="display:block" type="price" id="price"  /></br>
  
  <label for="price">TOTAL PRICE:</label>
  <input style="display:block" type="price" id="total"  /></br>
  
  <button onclick="pushData()">ADD</button>
</div>

<table >
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>QTY</th>
    <th>PRICE</th>
    <th>TOTAL PRICE</th>
  </tr>
  <tbody id="display"></tbody>
</table>

CodePudding user response：

You can try this one using some method you can filter and display alert if product is already present.

let products = [];
  function pushData() {
    const data = {
      id: document.getElementById('id').value,
      name: document.getElementById('name').value,
      qty: document.getElementById('qty').value,
      price: document.getElementById('price').value,
      total: document.getElementById('total').value
    }

    if (products.some(item => item.id == document.getElementById('id').value)) {
      alert('Product already exist!');
      return;
    } else {
      products = [];
      products.push(data);
    }

    $.each(products, function (key, value) {
      $('#display').append(`
        <tr>
        <td>${value.id}</td>
        <td>${value.name}</td>
        <td>${value.qty}</td>
        <td>${value.price}</td>
        <td>${value.total}</td>
        </tr>`)
    })
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div style="background-color:pink ;">
  <label for="id">ID</label>
  <input style="display:block" type="number" id="id"  /></br>

  <label>NAME:</label>
  <input style="display:block" type="Name" id="name" ></br>

  <label for="qty">QTY:</label>
  <input style="display:block" type="Qty" id="qty"  /></br>

  <label for="price">PRICE:</label>
  <input style="display:block" type="price" id="price"  /></br>

  <label for="price">TOTAL PRICE:</label>
  <input style="display:block" type="price" id="total"  /></br>

  <button onclick="pushData()">ADD</button>
</div>

<table >
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>QTY</th>
    <th>PRICE</th>
    <th>TOTAL PRICE</th>
  </tr>
  <tbody id="display"></tbody>
</table>