Remove duplicate comma seperated numbers from input text value in jQuery

Question

I have an input on a webpage with a value like this 1,7,1,4,22,58,58,1,1,4,7

<input type="text" name="hello" id="thankyouforhelping" value="" aria-invalid="false">

I tried numerous ways to remove the duplicate from it but none of the ways work. I tried: jQuery function to get all unique elements from an array? and jQuery function to get all unique elements from an array?

I get the value like this:

/* Grabbing up to date value to remove duplicates */
$upToDateValue = $('.wdrow-'+$projectrow+' .tasks-created input').val();

The value will always be numbers that are comma seperated but how can I remove all the duplicated numbers. And if you are willing how could I also sort it from low to high?

So that the end result would be 1,4,7,22,58

/* Removing duplicates */
$newValue = ???;

PS: I see a lot of answers on previously asked questions are javascript but I have my code in jQuery and I am struggling a lot with adapting those answers to my jQuery code. So I am sorry that this question is so closely related to others already available. Questions like this: Get all unique values in a JavaScript array (remove duplicates) I have no clue how to adapt the accepted answer to my code.

Thanks everyone for helping!

##Heretic_Monkey helped me out a lot and this is the result:

$upToDateValue = $('.wdrow-'+$projectrow+' .tasks-created input').val();
/* Removing duplicates */
var values = $upToDateValue.split(','); values = [...new Set(values)]; values.sort(); $newValue = values.join(',');
/* Setting new value to input */
$('.wdrow-'+$projectrow+' .tasks-created input').val($newValue);

You can use Set to get the unique values as simple as that like this new Set([1,7,1,4,22,58,58,1,1,4,7]); — Harmandeep Singh Kalsi, Jun 26 '20 at 17:12
Is the value that you are getting an array, I mean what is type of upToDateValue ? — Harmandeep Singh Kalsi, Jun 26 '20 at 17:15
jQuery is written in JavaScript. There is no difference between them. You just need to get your string as an array. `$upToDateValue.split(',')` will produce an array. You would then run that through any one of the answers on any of the three questions you've linked to, the turn the array back to a string via `array.join(',')`. — Heretic Monkey, Jun 26 '20 at 17:15
@HarmandeepSinghKalsi The input type is text. But I am not sure if it is that what you wanted to know? — purple11111, Jun 26 '20 at 17:19
See [How to convert a comma separated string to an array?](https://stackoverflow.com/q/2858121/215552) and [Easy way to turn JavaScript array into comma-separated list?](https://stackoverflow.com/q/201724/215552). — Heretic Monkey, Jun 26 '20 at 17:21
@HarmandeepSinghKalsi I am a noob when it comes to this and I have no clue where to find what datatype the input is. — purple11111, Jun 26 '20 at 17:21
If it is a string you can use new Set(str.split(",")); where str is "1,7,1,4,22,58,58,1,1,4,7" . If it is already an array then you can use new Set(arr); where arr = [1,7,1,4,22,58,58,1,1,4,7] — Harmandeep Singh Kalsi, Jun 26 '20 at 17:21
@HarmandeepSinghKalsi The OP has said that it comes from `.val()`. The result of `.val()` is always a string. — Heretic Monkey, Jun 26 '20 at 17:23
@HereticMonkey Is there any change for you to do the combine? As I understand the split and the join but how I can combine that with the other links looks like magic to me. — purple11111, Jun 26 '20 at 17:25
Does this answer your question? [Get all unique values in a JavaScript array (remove duplicates)](https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates) — Heretic Monkey, Jun 26 '20 at 17:25
@HereticMonkey It probably does answer the question only I am not at the level yet that I can work with it. I also posted this same question in my question. I can't figure out how to combine it with my own code. — purple11111, Jun 26 '20 at 17:26
There's no magic, just programming :). `var values = $upToDateValue.split(','); values = [...new Set(values)]; $newValue = values.join(',');` — Heretic Monkey, Jun 26 '20 at 17:27
Please [edit] your question to show how you're going to use these unique, sorted values if you need help understanding how to use the unique, sorted values. — Heretic Monkey, Jun 26 '20 at 17:33
@HereticMonkey I edited my question. I added the now up to date code to it. Thank you so much as it is now adding the unique numbers to the input. Basically overwriting the input where it had the duplicates. It is not yet sorting though. Should it already be sorting and is there a change you can point me to the docs about this new Set(values) as I have a ton of questions. Like what do the ... do. — purple11111, Jun 26 '20 at 17:36
If you want it sorted, just put `values.sort();` in there before the `$newValue = values.join(',');`. [MDN has great documentation on lots of things in JavaScript works, including spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). — Heretic Monkey, Jun 26 '20 at 17:42
@HereticMonkey You are my hero! It is working perfectly. Thank you so much and also thank you for the link that is going to be my next step of the day. Learning what it all does. Can you post the last code block from my question as an answer then I can vote it as accepted. Super thanks!! — purple11111, Jun 26 '20 at 17:46

score 1 · Accepted Answer · answered Jun 26 '20 at 17:53

Combining answers from How to convert a comma separated string to an array?, Easy way to turn JavaScript array into comma-separated list?, and Get all unique values in a JavaScript array (remove duplicates), this is one way of performing the task:

// Get the value
var $upToDateValue = $('.wdrow-'+$projectrow+' .tasks-created input').val();
// Split into an array
var values = $upToDateValue.split(','); 
// Remove the duplicates and make a new array
values = [...new Set(values)]; 
// Sort the new array
values.sort(); 
// Create a new comma-delimited string from the array
var $newValue = values.join(',');
// Set the new value to input
$('.wdrow-'+$projectrow+' .tasks-created input').val($newValue);

References for code used:

Marik Ishtar · Answer 2 · 2020-06-26T17:37:38.893

0

I updated the code, you can copy the function and paste in your code.

then call it in your code using $newValue = unique(values)

Try this code:

function unique (value) {

  const valueList = value.split(",")
  const unique = valueList.filter((item, index, valueList) => {
    return index === valueList.indexOf(item);
  });
  const sorted = unique.sort(function(a, b) { return a - b; });
  
  return sorted.join(',')
}


/* you can use it this way */
const value = "1,7,1,4,22,58,58,1,1,4,7"
$newValue = unique(value)

/* printing */
console.log($newValue)

edited Jun 26 '20 at 17:37

answered Jun 26 '20 at 17:17

Marik Ishtar

2,899
1
13
27

Thank you for your code but how would this looked combined with my code. As my main issue is the combining of the jQuery and js. Where should I put `$upToDateValue` and `$newValue` – purple11111 Jun 26 '20 at 17:28
are you going to use the sorted list as a string or numbers ? – Marik Ishtar Jun 26 '20 at 17:31
For the `unique` you can do ```const unique = [...(new Set(numbers))];``` – ktowen Jun 26 '20 at 17:31
Thank you for updating your code but is this better than `var values = $upToDateValue.split(','); values = [...new Set(values)]; $newValue = values.join(',');` I am completely confused by all the `const` and `return` and to be honest I don't know what to do with $newValue = unique(value) where does it get the thing between the (). I am absolutely not saying it is wrong and I really appreciate your help but the answer is going over my head. My fault absolutely not yours! – purple11111 Jun 26 '20 at 17:40

Remove duplicate comma seperated numbers from input text value in jQuery

2 Answers2