create array, use $.each to loop, and add value if not in array

Question

I have a bunch of .defined in a text and want to create an array of unique values with javascript. So basically, for each anchor with class defined, I want to first check the array to see if the pair already exists. If exists, go to next anchor. If does not exist, add to array. This is the code I have tried using, but it does not remove duplicate values.

var arr = new Array();
y = 0;
$("a.defined").each(function() {
var spanishWord = this.text;
var englishWord = this.title;
if(spanishWord in arr) {
    console.log("do nothing");
} else {
    arr.push({key: spanishWord, value: englishWord});
    y++;
}

For example, I have these tags in the text:

<a title="read">Leer</a>
<a title="work">Trabajar</a>
<a title="like">Gustar</a>
<a title="read">Leer</a>
<a title="sing">Cantar</a>
<a title="like">Gustar</a>

And I would like my array to look like:

Spanish Word  |   English Word
Leer               read
Trabajar           work
Gustar              like
Cantar              sing

but instead it looks like:

Spanish Word  |   English Word
Leer               read
Trabajar           work
Gustar              like
Leer                read
Cantar              sing
Gustar              like

Any ideas?

Answer 1

I would do this in two steps.. one to eliminate duplicates, and one to create the array:

http://jsfiddle.net/uN4js/

var obj = {};
$('a.defined').each(function() {
     obj[this.text] = this.title;
});

var arr = [];
for (var prop in obj) {
    if (obj.hasOwnProperty(prop))    
        arr.push({key: prop, value: obj[prop]});
};

console.log(arr);

If the object is sufficient and you don't really need an array, you could stop after the object is created.

Answer 2

You can probably just use a javascript object here:

var dict = {};
y = 0;
$("a.defined").each(function() {
    var spanishWord = this.text;
    var englishWord = this.title;
    dict[spanishWord] = englishWord;
}

And there isn't really a need for unique checks, since newer values will just overwrite the older ones. If you don't want that behaviour, you can do this:

var dict = {};
y = 0;
$("a.defined").each(function() {
    var spanishWord = this.text;
    var englishWord = this.title;
    if (!(spanishWOrd in dict)) {
        dict[spanishWord] = englishWord;
    }
}

Answer 3

Javascript's in operator is not used for testing inclusion, it's used for iteration in a for .. in .. loop.

Other answers have suggested correctly that you need either .indexOf or JQuery's $.inArray method to test inclusion in an array, but there is a simpler (and faster) way of solving this problem: use a dictionary of key/value pairs instead!

var dict = {};
$("a.defined").each(function() {
    dict[this.textContent] = this.title;
});

Afterwards, you can use for key in dict to iterate over the list of unique Spanish words, and dict[key] to get the corresponding English translation.

Answer 4

Try this:

JavaScript

var arr = {};
$("a").each(function() {
var spanishWord = this.text;
var englishWord = this.title;
if(spanishWord in arr) {
    console.log("do nothing");
} else {
    arr[spanishWord] = englishWord;
}
});
console.log(arr);