Jquery, Pass Input Data to an Array

Question

I have a set of array on the text field

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

How to can I prevent passing duplicate array

this is my jquery code

  $(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);

});

Akhil Aravind · Accepted Answer · 2020-01-30 05:10:32Z

1

We can use Array.filter() to filter duplicate values, values.filter((a, b) => values.indexOf(a) === b);

Before that we need to push all the values to an array. This is what I did

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>

edited Jan 30, 2020 at 5:10

answered Jan 30, 2020 at 4:46

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jay Over a year ago

this works. how can i use .join(' ') because I am trying to join the 2 array into a p tag to my modal $("#owner_html").val(values); this is my 

Akhil Aravind Over a year ago

So you are trying to join array 1 and array 2, like [jon, won, don] and [ roy, joy, coy], then display those in a p tag, eg.  jon won ..., like., right ?

Jay Over a year ago

yes done thank you. can i ask ${user} what is this (`) why cant i use a (")

Akhil Aravind Over a year ago

Its template literal, you can refer the doc and you will get good info from there rather than me explaining. :). I am bad in explaining bro, sorry. Please check the link developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Christian Carrillo · Accepted Answer · 2020-01-30 04:49:25Z

1

using reduce can prevent repeat value:

$(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">

answered Jan 30, 2020 at 4:49

Christian Carrillo

2,7612 gold badges11 silver badges15 bronze badges

Comments

Daniel Smith · Accepted Answer · 2020-01-30 04:43:29Z

0

Index of all items in an array with the index of the first occurrence of the same item, If indexes are not the same returns it as duplicate.

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);

answered Jan 30, 2020 at 4:43

Daniel Smith

1,7744 gold badges31 silver badges64 bronze badges

Comments

Mohamed Farouk · Accepted Answer · 2020-01-30 04:44:06Z

You can use mix of map and includes like below:

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">

rajesh · Accepted Answer · 2020-01-30 04:50:26Z

0

Please run below code it will remove duplicate records

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

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

answered Jan 30, 2020 at 4:50

rajesh

2191 silver badge8 bronze badges

Comments

User863 · Accepted Answer · 2020-01-30 04:52:30Z

0

Using $.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">

answered Jan 30, 2020 at 4:52

User863

20.1k3 gold badges20 silver badges45 bronze badges

Comments

Ahmed Maruf · Accepted Answer · 2020-01-30 05:26:52Z

There are many ways to implement the solution: I have included few of them

HTML:

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

Naive solution:

(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);

The above code implements two nested loops to find duplicates!

Naive approach with slightly better performance:

(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);

behind the process this approach is followed in most of the standard libraries or existing functions with some additional performance improvements.

Here is another way of doing the same using some existing helper functions:

(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);

Collectives™ on Stack Overflow

Jquery, Pass Input Data to an Array

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

HTML:

Naive solution:

Naive approach with slightly better performance:

Here is another way of doing the same using some existing helper functions:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

Comments

Comments

Comments

Comments

Comments

HTML:

Naive solution:

Naive approach with slightly better performance:

Here is another way of doing the same using some existing helper functions:

Comments

Your Answer

Sign up or log in

Post as a guest

Related