Not allowing to push duplicate items into array - javascript

Basically I'm pushing containers into an array, and once one has been pushed, I don't want to allow that same one to be pushed again.
Here is my JSfiddle: http://jsfiddle.net/9Dmcg/3/
Javascript:
$(document).ready(function(){
var favorites = [];
var counter = 0;
$('.containers').on('click', function(){
favorites.push($(this).clone())
$('.favorite').append(favorites);
});
});
I need to find a way to work around that.

Unless there's more to that click event, you can use the .one() method in place of .on to get this functionality.
$(document).ready(function(){
var favorites = [];
var counter = 0;
$('.containers').one('click', function(){
favorites.push($(this).clone())
$('.favorite').append(favorites);
});
});
http://jsfiddle.net/9Dmcg/4/
Even if there were more to it, you could still use .one():
$(document).ready(function(){
var favorites = [];
var counter = 0;
$('.containers').one('click', function(){
favorites.push($(this).clone())
$('.favorite').append(favorites);
$(this).on("click",function(){
alert("Favorite Added!");
}).triggerHandler("click");
});
});
http://jsfiddle.net/9Dmcg/5/

Try to check for element id's I would say. Something like this:
$(document).ready(function(){
var favorites = [];
var counter = 0;
$('.containers').bind('click', function(){
var isAdded = false;
for (var f = 0; f < favorites.length; f++) {
console.log(favorites[f].id + "|" + this.id);
if (favorites[f].id === this.id)
isAdded = true;
}
if (!isAdded)
favorites.push($(this).clone()[0])
console.log(favorites);
$('.favorite').append(favorites);
});
});
And here's working example -> http://jsfiddle.net/9Dmcg/7/
mz

This can be done using the JS Proxy (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
Following is the code to create an array which will not accept duplication entry
var arr = new Proxy([], {
get: function(target, key) {
return target[key];
},
set: function(target, key, value){
if(target.indexOf(value)>=0) return false;
target[key] = value;
return true
}
});
arr.push(100);
arr.push(100); // this will throw error
In the above code, we are modifying the default behaviour of array as the set method will be called on any modification done on the array.

You can check if the element already exists:
$(document).ready(function(){
var favorites = [];
$('.containers').on('click', function(){
var found = false;
for(var i = 0; i < favorites.length; i++)
{
if (favorites[i] == $(this)) found = true;
}
if (!found) favorites.push($(this).clone())
$('.favorite').append(favorites);
});
});

Add a class to items that have been pushed, and then do a basic check:
Instead of:
favorites.push($(this).clone())
you can do:
if( !$(this).hasClass("pushed") ) {
favorites.push( $(this).addClass("pushed").clone() );
}

Just push the element itself instead of cloning it:
favorites.push($(this))
The added benefit is that it gives the user a clue that the item has already be added.
Live demo: http://jsfiddle.net/9Dmcg/6/

Seems like your looking for Array.indexOf. It returns the index of the value on an array. Returns -1 if not found.
It is a new array method, so you will need a polyfill for it to work on old browsers.
$(document).ready(function(){
var favorites = [];
var counter = 0;
$('.containers').on('click', function(){
var clone = $(this).clone(); // caching element
if (favorites.indexOf(clone) !== -1) {
favorites.push(clone);
}
$('.favorite').append(favorites);
});
});

Related

How can I put the results in an array after use each in javascript?

Hi I have this function:
changeTarea: function() {
var self = this;
$("#select_tarea_id").change(function() {
var id_tarea = $("#select_tarea_id").val();
$.each(self.objTareasFlot, function(index,value) {
for(var i = 0; i < value.length; i++) {
if(value[i].Id == id_tarea) {
self.objTareasFlotFinal['id']=value[i].Id;
self.objTareasFlotFinal['id_pro']=value[i].Id_proyecto;
self.objTareasFlotFinal['tarea']=value[i].nombre_tarea;
self.objTareasFlotFinal['porcentaje']=value[i].porcentaje;
console.info(self.objTareasFlotFinal);
}
}
});
});
}
And the function print :
But I need the 3 results in one array
for example :
How can I do that with that function? Sorry for my english I did try to explain of the better way
You can declare an array and push populated object into it. Something like this:
changeTarea: function(){
var self = this;
var container[];
$("#select_tarea_id").change(function() {
var id_tarea = $("#select_tarea_id").val();
$.each(self.objTareasFlot, function(index,value) {
for(var i = 0; i < value.length; i++){
if(value[i].Id == id_tarea){
self.objTareasFlotFinal['id']=value[i].Id;
self.objTareasFlotFinal['id_pro']=value[i].Id_proyecto;
self.objTareasFlotFinal['tarea']=value[i].nombre_tarea;
self.objTareasFlotFinal['porcentaje']=value[i].porcentaje;
console.info(self.objTareasFlotFinal);
container.push(self.objTareasFlotFinal);
}
}
});
});},
Create an array variable var result = []; inside your function.
Within your loop push() the objects into it;
results.push(self.objTareasFlotFinal);
var newArray = [];
self.objTareasFlotFinal['id']=value[i].Id;
self.objTareasFlotFinal['id_pro']=value[i].Id_proyecto;
self.objTareasFlotFinal['tarea']=value[i].nombre_tarea;
self.objTareasFlotFinal['porcentaje']=value[i].porcentaje;
newArray.push(self.objTareasFlotFinal);
// console.log should show the results
console.log(newArray);
If this array is meant to be global and accessible outside the function, you might want to define newArray outside the function first and remove the var from it within the function.
Then every time somebody runs the function, a new object is added to the array.
Alternatively, you could just return the array as the final value:
var newArray = [];
self.objTareasFlotFinal['id']=value[i].Id;
self.objTareasFlotFinal['id_pro']=value[i].Id_proyecto;
self.objTareasFlotFinal['tarea']=value[i].nombre_tarea;
self.objTareasFlotFinal['porcentaje']=value[i].porcentaje;
newArray.push(self.objTareasFlotFinal);
return newArray;

Avoiding duplication in object- Javascript

I have the next object:
var persons= {};
persons["Matt"].push("A");
persons["Matt"].push("B");
persons["Matt"].push("C");
And I want to know if the object contains the element which I try to insert.
E.g:
persons["Matt"].push("A"); /* The element A already exist... And I don't want duplicate elements.*/
Anybody know one way to make it?
EDIT WITH MORE DETAILS:
I have a the next code:
function insertIfNotThere(array, item) {
if (array.indexOf(item) === -1) {
array.push(item);
}
}
function EventManager(target) {
var target = target || window, events = {};
this.observe = function(eventName, cb) {
if (events[eventName]){
insertIfNotThere(events[eventName], cb);
}else{
events[eventName] = []; events[eventName].push(cb);
}
return target;
};
this.fire = function(eventName) {
if (!events[eventName]) return false;
for (var i = 0; i < events[eventName].length; i++) {
events[eventName][i].apply(target, Array.prototype.slice.call(arguments, 1));
}
};
}
I use your method for checking if the element with the content indicated exist. But... It push the element ever... I don't know what's happening...
First things first. When you do
persons= {};
you are creating a global property called persons and assigning an empty object to it. You might want a local variable here. So, change it to
var persons = {};
And then, when you create a new key in the object, by default, the value will be undefined. In your case you need to store an array. So, you have to initialize it like this
persons['Matt'] = [];
and then you can use the Array.prototype.indexOf function to find out if the item being added is already there in the array or not (it returns -1 if the item is not found in the array), like this
if (persons['Matt'].indexOf("A") === -1) {
persons['Matt'].push("A");
}
if (persons['Matt'].indexOf("B") === -1) {
persons['Matt'].push("B");
}
You can create a function to do this
function insertIfNotThere(array, item) {
if (array.indexOf(item) === -1) {
array.push(item);
}
}
var persons = {};
persons['Matt'] = [];
insertIfNotThere(persons['Matt'], 'A');
insertIfNotThere(persons['Matt'], 'B');
// This will be ignored, as `A` is already there in the array
insertIfNotThere(persons['Matt'], 'A');
Use indexOf to check for the existence of A. If it doesn't exist (is -1), add it to the array:
if (persons['Matt'].indexOf('A') === -1) {
persons['Matt'].push('A');
}

get each element from array at a time with jquery

I need to get all elements from array but one at a time and only to show up after something had been done with previous element. For example:
var elems = ['Apple','Orange','Banana'],
i = 0;
elems.forEach(function(e){
elems[i++].fadeIn(200, arguments.callee); // here I need some kind of callback function to process first element, and only when that's finished, another element should fadeIn.
});
Thank you.
You could use a recursive function
var elems = ['Apple','Orange','Banana'],
i = 0;
function (recursive(elem) {
$(elem).fadeIn(200, function() {
recursive(elems[++i]);
});
})(elems[0]);
or just delay()
var elems = ['Apple','Orange','Banana'],
i = 0;
$.each(elems, function(i, e){
e.delay(i*speed).fadeIn(200);
});
Use following
$(function(){
var myArray = ['Apple','Orange','Banana'];
var i=0;
$.each(myArray, function(index, value){
elems[i++].fadeIn(200, arguments.callee); // here I need some
});
});

Need help in my jquery plugin

Last week a made a function for ellipsing the text inside some selector.
I was calling the function like this:
ellipsiText('.class',50) passing the selector and the max length of the text that i wanted to. This works fine, but im trying to make it a plugin, to call like this: $('.class').ellipsiText(50).
So, i was reading the tutorial in jquery website, and i understood how to do it. But i think i'm having an issue with the "this" seletor. Here is my original function:
function ellipsiText(selector,maxLength){
var array = $(selector).map(function(){
return $(this).text();
}).get();
var i;
var teste = [];
for (i=0;i<array.length;i++){
if (array[i].length > maxLength){
teste.push(array[i].substr(0,maxLength) + "...");
} else {
teste.push(array[i]);
}
}
for (var i=0;i<teste.length;i++){
$(selector).each(function(i){
$(this).text(teste[i]);
});
}
}
and here is my tentative of making a jquery plugin:
(function ($) {
$.fn.ellipsiText = function(length){
var array = $(this).map(function(){
return $(this).text();
}).get();
var i;
var teste = [];
for (i = 0; i < array.length; i++){
if (array[i] > length){
teste.push(array[i].substr(0,length) + "...");
} else {
teste.push(array[i]);
}
}
$(this).each(function(i){
$(this).text(teste[i]);
});
};
}(jQuery));
What am i doing wrong?
Well first thing is not a problem, but instead of $(this) in the first function scope, you can use this.map/this.each.
The problem is, in the second code you do
if (array[i] > length)
instead of
if (array[i].length > length)
Nothing to do with the jQuery plugin!
http://jsfiddle.net/UY88r/
This is untested, but the basic structure is something like this. Also you have so much looping in your code when one loop is needed.
$.fn.ellipsiText= function(options) {
var settings = $.extend({ //nice way to give to give defaults
length : 50,
ellipsi : "..."
}, options );
return this.each(function() { //the return is needed for chaining
var elem = $(this);
var txt = elem.text();
if (txt.length>settings.length) {
elem.text(txt.substr(0,settings.length) + settings.ellipsi );
}
});
};
and call it
$( "div.defaults" ).ellipsiText();
$( "div.foo" ).ellipsiText({
length : 10
});
$( "div.more" ).ellipsiText({
length : 10,
ellipsi : "<more>"
});
You already have a working function, just use it.
$.ellipsiText = ellipsiText;
$.fn.ellipsiText = function (count) {
ellipsiText(this, count);
}
now you can use it like any of the following:
ellipsiText('.class',50);
$.ellipsiText('.class',50);
$('.class').ellipsiText(50);
There's no sense in rewriting the function you already have working when you can just use it.

Foreach loop javascript failing

Why does this each statement cause my code to break? Also do I have to set an index with javascript?
var email = [];
email['update'] = true;
email['e_case_id'] = $("#e_case").val();
var i = 0;
$.each($('.rowChecked'), function() {
email['e_attachments'][i] = $(this).attr('id');
i++;
});
Firstly, email should be an object literal, not an array literal:
var email = {};
Secondly, you didn't define email['e_attachments'] before you tried to use it. This is likely what's prevent it from working. Try adding
email['e_attachments'] = [];
Before the $.each.
You can use $.map in this circumstance, btw. That is:
email['e_attachments'] = $.map($('.rowChecked'), function (el) {
return $(el).attr('id');
});
Instead of your $.each. Or better yet:
email['e_attachments'] = $('.rowChecked').map(function () {
return $(this).attr('id');
}

Categories