Jquery, передать входные данные в массив

Question

У меня есть набор массивов в текстовом поле

<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Jan">

Как я могу предотвратить передачу дубликата массива

это мой jquery код

  $(document).on("click", ".open_modal", function() {

  //var values = $('input[name^="owner"]').map((i, a) => a.value).get();
  var values = $('input[name="owner[]"]').val();


  if(values == values) {
    alert('exist');  /* how to validate duplicate array */
  }
  $("#owner_value").val(values);

});

Answer 1

с помощью уменьшения может предотвратить повторное значение:

$(document).ready(() => {
  const $values = $('input[name^="owner"]').map((i, a) => a.value).get()

  const $filterValues = $values.reduce((acc, item) => (!acc.includes(item) && acc.push(item), acc), [])
  console.log($filterValues)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Jan">

Answer 2

Мы можем использовать Array.filter() для фильтрации повторяющихся значений, values.filter((a, b) => values.indexOf(a) === b);

Перед этим нам нужно собрать sh все значения в массив. Это то, что я сделал

var values = [];
    $('input[name="owner[]"]').each(function() {
        values.push($(this).val());
    });

var $ = jQuery;
 $(document).on("click", ".open_modal", function() {
var values = [];
var owners = ['john', 'wons', 'kolins'];
$('input[name="owner[]"]').each(function() {
    values.push($(this).val());
});
values = [...values, ...owners]; // here we merge both arrays and then remove the duplicates. 
  if(values.length) {
  values = values.filter((a, b) => values.indexOf(a) === b);
   // console.log(values); // now duplicates are removed.    
  }
  var htmlContent='';
  values.forEach((user)=>{
    if(user){
    htmlContent +=`<p>${user}</p></br>`;
    }
  })
  
  $("#owner_value").html(htmlContent);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Reys">
<input type="text" name="owner[]" value="Jan">

<p> Test btn </p>
<button class="open_modal">Open Modal </button>

<div id="owner_value"></div>

Answer 3

Существует много способов реализации решения: я включил несколько из них

HTML:

<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Jan">

Наивное решение:

(function($){
  $(document).on("click", ".submit", function() {
    var values = $('input[name="owner[]"]');
    var stores = [];
    values.each(function(index, value){
      stores.push($(this).val());
    });
    for(var i = 0; i <= stores.length; i++) {
        for(var j = i; j <= stores.length; j++) {
            if(i != j && stores[i] == stores[j]) {
                console.log('Duplicates exists!');
            }
        }
    }
  });
})(jQuery);

Приведенный выше код реализует два вложенных цикла для поиска дубликатов!

Наивный подход с несколько лучшей производительностью:

(function($){
  $(document).on("click", ".submit", function() {
    var values = $('input[name="owner[]"]');
    var stores = [];
    values.each(function(index, value){
      stores.push($(this).val());
    });
    var counts = [];
    for(var i = 0; i <= stores.length; i++) {
        if(counts[stores[i]] === undefined) {
            counts[stores[i]] = 1;
        } else {
            console.log('Duplicate exsist!');
        }
    }
  });
})(jQuery);

За этим процессом следует подход, применяемый в большинстве стандартных библиотеки или существующие функции с некоторыми дополнительными улучшениями производительности.

Вот еще один способ сделать то же самое с использованием некоторых существующих вспомогательных функций:

(function($){
  $(document).on("click", ".submit", function() {
    var values = $('input[name="owner[]"]');
    var stores = [];
    values.each(function(index, value) {
        console.log($(this).val());
        if ($.inArray($(this).val(), stores) == -1){
          console.log('No Duplicate');
          stores.push($(this).val());
        }else{
          console.log('Duplicate Exist');
        }
    });
  });
})(jQuery);

Answer 4

Использование $.unique()

var values = $.unique($('input[name="owner[]"]').map((i, el) => el.value).get())

console.log(values)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Jan">

Answer 5

Пожалуйста, запустите ниже код, он удалит дубликаты записей

  var myArray = ["Hardik", "Rajesh", "Sagar", "Hardik", "Sanju"];

  var myNewArray = myArray.filter(function(elem, index, self) {
      return index === self.indexOf(elem);
  });

Answer 6

Вы можете использовать сочетание карты и включает в себя, как показано ниже:

var existingValues = [];
  var values = $('input[name^="owner"]').map((i, a) => {
    if (!existingValues.includes(a.value)) {
      existingValues.push(a.value);
      console.log(a.value);
      return a;
    }
  });

function getUnique() {
  var existingValues = [];
  var values = $('input[name^="owner"]').map((i, a) => {
    if (!existingValues.includes(a.value)) {
      existingValues.push(a.value);
      console.log(a.value);
      return a;
    }
  });
  console.log(values.length);
  console.log(values);
}

getUnique();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Rey">
<input type="text" name="owner[]" value="Jan">

Answer 7

Индекс всех элементов в массиве с индексом первого появления того же элемента. Если индексы не совпадают, возвращает его как дубликат.

function getUnique(array){
    var uniqueArray = [];
    for(i=0; i < array.length; i++){
        if(uniqueArray.indexOf(array[i]) === -1) {
            uniqueArray.push(array[i]);
        }
    }
    return uniqueArray;
}

var names = ["John", "Peter", "Clark", "Harry", "John", "Alice"];
var uniqueNames = getUnique(names);
console.log(uniqueNames);