jquery distinct array

Question

I have array textbox something like below

<input type="text" name="txtname[]" value="single" />
<input type="text" name="txtname[]" value="twin" />
<input type="text" name="txtname[]" value="single" />
<input type="text" name="txtname[]" value="dulex" />
<input type="text" name="txtname[]" value="single" />

I wanna show those value to...

single -------- 3
twin -------- 1
dulex -------- 1

Why do you multiple text fields (those are not text areas) with the same name? Why do the names have the "[]"s? What do you mean by "show"? On the page? What are the significance of 3, 1 and 1 in your sample? Help us help you. — Ates Goral, Sep 29 '11 at 17:17
Where do you want to show the values? Could you provide a bit more context? — ipr101, Sep 29 '11 at 17:17
@AtesGoral having inputs with the same name and `[]` is perfectly valid and allows you to send essentially an array to the server. — Explosion Pills, Sep 29 '11 at 17:19
@tandu I didn't say it was invalid. But also note that how multiple query parameters, and query parameters with a "[]" in them are interpreted (i.e. whether they become an array) are entirely up to the backend technology that you're using. — Ates Goral, Sep 29 '11 at 17:24
@AtesGoral presumably he wouldn't use this functionality if he couldn't take advantage of it. It's also spurious to say that it's *entirely* up to the back end. jQuery will serialize array input appropriately. — Explosion Pills, Sep 29 '11 at 17:54
@tandu I used "query parameters" to refer to the ultimate URL-encoded parameters in a HTTP request URL. In that sense, you're right: jQuery will do some processing on the payload that's passed to the ajax() function. — Ates Goral, Sep 30 '11 at 01:42

Brad Christie · Answer 1 · 2011-09-29T17:40:16.100

var txtname = $(':input[name="txtname[]"]').map(function(a,b){ return $(b).val(); }).toArray();

var unique = {};
$.each(txtname, function(a,b){
    if (!unique[b])
        unique[b] = 0;
    unique[b]++;
});

unique ended up with:

({single:3, twin:1, dulex:1})

UPDATE

In case you want it as a jQuery add-on:

$.fn.extend({
    unique_count: function(){
        var unique = {};
        this.each(function(a,b){
            var v = $(b).val();
            if (!unique[v])
                unique[v] = 0;
            unique[v]++;
        });
        return unique;
    },
    unique_vals: function(){
        var unique = [];
        $.each($(this).unique_count(), function(a,b){ unique.push(a); });
        return unique;
    }
});

And the output being:

var $inputs = $(':input[name="txtname[]"]');
$inputs.unique_count() // = Object: {single:3, twin:1, dulex:1}
$inputs.unique_vals()  // = Array:  ["single", "twin", "duplex"]

I would have given you an extra +1 if I could, for being able to infer what the question (in its original form) was about... — Ates Goral, Sep 29 '11 at 17:26

score 1 · Answer 2 · answered Sep 29 '11 at 17:17

1

Check out the jquery unique function: http://api.jquery.com/jQuery.unique/

answered Sep 29 '11 at 17:17

endyourif

2,186
19
33

`$.unique` will not work here. It only identifies exact duplicates of DOM elements, not identical (but distinct) elements. – Blazemonger Sep 29 '11 at 17:23

score 1 · Answer 3 · answered Sep 29 '11 at 17:18

You can say this:

var all = $(":text");
var uniqueNames = jQuery.unique(all.map(function(){return $(this).attr("value"); }));
jQuery.each(uniqueNames, function(){
    console.log(this + "---" + all.filter("[value=" + this + "]").length);
});

The code is self descriptive:

find unique values
count them in original array

See example here: http://jsfiddle.net/BPxTd/

jquery distinct array

3 Answers3