294

If I have the following array of objects:

[ { id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 2, username: 'ted' } ]

Is there a way to loop through the array to check whether a particular username value already exists and if it does do nothing, but if it doesn't to add a new object to the array with said username (and new ID)?

Thanks!

6
  • 1
    Are Bill and Ted supposed to have the same ID? Commented Apr 3, 2014 at 17:18
  • Why there's two elements with the same id? Is that possible that elements will be removed from this array, or can we be sure that the new element will always have id equal to arr.length + 1? Commented Apr 3, 2014 at 17:18
  • If you don't want to loop through it, check this Q&A for extending array prototype, stackoverflow.com/questions/1988349/…. Commented Apr 3, 2014 at 17:19
  • native functions are slower compared to normal loops and their support is limited to some browser versions. check my answer below. Commented Nov 10, 2017 at 9:21
  • this is a fundamentally wrong question because you can do that by avoiding the use of Arrays. Commented Nov 10, 2017 at 9:28

22 Answers 22

438

I've assumed that ids are meant to be unique here. some is a great function for checking the existence of things in arrays:

const arr = [{ id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' }];

function add(arr, name) {
  const { length } = arr;
  const id = length + 1;
  const found = arr.some(el => el.username === name);
  if (!found) arr.push({ id, username: name });
  return arr;
}

console.log(add(arr, 'ted'));

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

11 Comments

Thanks Andy this is a very clean solution to the problem and is working very well. I had not come across the some method before. Your assumption was correct my ID example was just a typo, I was using arr.length + 1 to determine the ID.
Beware that IE8 and earlier do not support the some function.
Oh, sure: if (arr.some(function (el) { return el.Id == someId; })) { // do something }. Don't forget that return or you won't get anything back.
Hi, If I found the value how can I access the id?
Very nice solution and just what I was looking for. Thanks for that!
|
77

This small snippets works for me..

const arrayOfObject = [{ id: 1, name: 'john' }, {id: 2, name: 'max'}];

const checkUsername = obj => obj.name === 'max';

console.log(arrayOfObject.some(checkUsername))

if you have array of elements like ['john','marsh'] then we can do some thing like this

const checkUsername = element => element == 'john';
    
console.log(arrayOfObject.some(checkUsername))

1 Comment

Rather elegant approach! - More details and examples using .some found here - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
50

It's rather trivial to check for existing username:

var arr = [{ id: 1, username: 'fred' }, 
  { id: 2, username: 'bill'}, 
  { id: 3, username: 'ted' }];

function userExists(username) {
  return arr.some(function(el) {
    return el.username === username;
  }); 
}

console.log(userExists('fred')); // true
console.log(userExists('bred')); // false

But it's not so obvious what to do when you have to add a new user to this array. The easiest way out - just pushing a new element with id equal to array.length + 1:

function addUser(username) {
  if (userExists(username)) {
    return false; 
  }
  arr.push({ id: arr.length + 1, username: username });
  return true;
}

addUser('fred'); // false
addUser('bred'); // true, user `bred` added

It will guarantee the IDs uniqueness, but will make this array look a bit strange if some elements will be taken off its end.

1 Comment

Thanks for this. I went with Andy's solution in the end because it's a more succinct way of achieving the same thing. I won't be removing users at any point so IDs should remain consistent. The check allows users to log in, out and back in again without the array growing overtime. Just for info I'm using this function in conjunction with passport.js and I haven't been able to find a way of removing users from the array without playing with passport code itself. This solution works nicely.
28

There could be MULTIPLE POSSIBLE WAYS to check if an element(in your case its Object) is present in an array or not.

const arr = [
  { id: 1, username: 'fred' },
  { id: 2, username: 'bill' },
  { id: 3, username: 'ted' },
];

let say you want to find an object with id = 3.

1. find: It searches for an element in an array and if it finds out then it returns that element else return undefined. It returns the value of the first element in the provided array that satisfies the provided testing function. reference

const ObjIdToFind = 5;
const isObjectPresent = arr.find((o) => o.id === ObjIdToFind);
if (!isObjectPresent) {            // As find return object else undefined
  arr.push({ id: arr.length + 1, username: 'Lorem ipsum' });
}

2. filter: It searches for elements in an array and filters out all element that matches the condition. It returns a new array with all elements and if none matches the condition then an empty array. reference

const ObjIdToFind = 5;
const arrayWithFilterObjects= arr.filter((o) => o.id === ObjIdToFind);
if (!arrayWithFilterObjects.length) {       // As filter return new array
  arr.push({ id: arr.length + 1, username: 'Lorem ipsum' });
}

3. some: The some() method tests whether at least one element is present in an array that passes the test implemented by the provided function. It returns a Boolean value. reference

const ObjIdToFind = 5;
const isElementPresent = arr.some((o) => o.id === ObjIdToFind);
if (!isElementPresent) {                  // As some return Boolean value
  arr.push({ id: arr.length + 1, username: 'Lorem ipsum' });
}

1 Comment

Coming from python, I was surprised to see that nobody is worrying about efficiency. The first solution, with find, seems better because iterations will stop when a first matching element is found. or a for loop with a break
21

This is what I did in addition to @sagar-gavhane's answer

const newUser = {_id: 4, name: 'Adam'}
const users = [{_id: 1, name: 'Fred'}, {_id: 2, name: 'Ted'}, {_id: 3, name:'Bill'}]

const userExists = users.some(user => user.name === newUser.name);
if(userExists) {
    return new Error({error:'User exists'})
}
users.push(newUser)

2 Comments

Hi, If I found the value how can I access the id?
It's really simple to do that ... if(userExists) { const userId = userExists.id return userId; } ...
17

I think that, this is the shortest way of addressing this problem. Here I have used ES6 arrow function with .filter to check the existence of newly adding username.

var arr = [{
    id: 1,
    username: 'fred'
}, {
    id: 2,
    username: 'bill'
}, {
    id: 3,
    username: 'ted'
}];

function add(name) {
    var id = arr.length + 1;        
            if (arr.filter(item=> item.username == name).length == 0){
            arr.push({ id: id, username: name });
        }
}

add('ted');
console.log(arr);

Link to Fiddle

Comments

10

Let's assume we have an array of objects and you want to check if value of name is defined like this,

let persons = [ {"name" : "test1"},{"name": "test2"}];

if(persons.some(person => person.name == 'test1')) {
    ... here your code in case person.name is defined and available
}

2 Comments

Please add a few sentences to explain what your code is doing, so you can get more upvotes for your answer.
What if I want to compare objects with 2 attributes like {"name" : "test1", "age": 30} ?
3

try this

first method using some

  let arr = [{ id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' }];
    let found = arr.some(ele => ele.username === 'bill');
    console.log(found)

second method using includes, map

   let arr = [{ id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' }];
    let mapped = arr.map(ele => ele.username);
    let found = mapped.includes('bill');
    console.log(found)

2 Comments

What if I want to compare objects with 2 attributes like {"name" : "test1", "age": 30} ?
@probitaille you can use && operator const obj = {"name" : "test1", "age": 30}; arr.some(a => a.name === obj.name && a.age === obj.age);
2

You could prototype your array to make it more modular, try something like this

    Array.prototype.hasElement = function(element) {
        var i;
        for (i = 0; i < this.length; i++) {
            if (this[i] === element) {
                return i; //Returns element position, so it exists
            }
        }

        return -1; //The element isn't in your array
    };

And you can use it as:

 yourArray.hasElement(yourArrayElement)

Comments

2

Accepted answer can also be written in following way using arrow function on .some

 function checkAndAdd(name) {
     var id = arr.length + 1;
     var found = arr.some((el) => {
           return el.username === name;
     });
     if (!found) { arr.push({ id: id, username: name }); }
 }

Comments

2

Here is an ES6 method chain using .map() and .includes():

const arr = [ { id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 2, username: 'ted' } ]

const checkForUser = (newUsername) => {
      arr.map(user => {
        return user.username
      }).includes(newUsername)
    }

if (!checkForUser('fred')){
  // add fred
}
  1. Map over existing users to create array of username strings.
  2. Check if that array of usernames includes the new username
  3. If it's not present, add the new user

Comments

1

I like Andy's answer, but the id isn't going to necessarily be unique, so here's what I came up with to create a unique ID also. Can be checked at jsfiddle too. Please note that arr.length + 1 may very well not guarantee a unique ID if anything had been removed previously.

var array = [ { id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' } ];
var usedname = 'bill';
var newname = 'sam';

// don't add used name
console.log('before usedname: ' + JSON.stringify(array));
tryAdd(usedname, array);
console.log('before newname: ' + JSON.stringify(array));
tryAdd(newname, array);
console.log('after newname: ' + JSON.stringify(array));

function tryAdd(name, array) {
    var found = false;
    var i = 0;
    var maxId = 1;
    for (i in array) {
        // Check max id
        if (maxId <= array[i].id)
            maxId = array[i].id + 1;

        // Don't need to add if we find it
        if (array[i].username === name)
            found = true;
    }

    if (!found)
        array[++i] = { id: maxId, username: name };
}

2 Comments

I like the simplicity in the other answers, I just posted mine to add the check for unique ID
Thanks for your answer Uxonith. At the moment I do not have a need for unique ID because I won't be removing users from the array. I will keep this resolution in my back pocket in case the need arises. Thanks again
1

i did try the above steps for some reason it seams not to be working for me but this was my final solution to my own problem just maybe helpful to any one reading this :

let pst = post.likes.some( (like) => {  //console.log(like.user, req.user.id);
                                     if(like.user.toString() === req.user.id.toString()){
                                         return true
                                     } } )

here post.likes is an array of users who liked a post.

Comments

1

Greatly simplifying my previous solutions here and providing better performance by not iterating over the entire array unnecessarily before checking for the existence of the specified ID.

This should be the simplest solution (I think):

const users = [{ id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' }];
const addUser = (username) => {
  const user = users.find((user) => user.username === username);
  if (user) return { ...user, new: false };
  const newUser = {
    id: users.length + 1,
    username,
  };
  users.push(newUser);
  return { ...newUser, new: true };
};

Here is how that might look as a live example:

const users = [{ id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 3, username: 'ted' }];
const addUser = (username) => {
  const user = users.find((user) => user.username === username);
  if (user) return { ...user, new: false };
  const newUser = {
    id: users.length + 1,
    username,
  };
  users.push(newUser);
  return { ...newUser, new: true };
};

// a little extra scripting here to support the input and button in the example

const form = document.querySelector('form');
const input = document.querySelector('input');
const span = document.querySelector('span');
const pre = document.querySelector('pre');

const syncDataWithPre = () => {
  pre.innerHTML = JSON.stringify(users, null, 2);
};

form.onsubmit = (e) => {
  e.preventDefault();
  span.textContent = '';
  if (input.value) {
    const user = addUser(input.value);
    const { new: isNew, ...userDetails } = user;
    span.classList[isNew ? 'add' : 'remove']('new');
    span.textContent = `User ${isNew ? 'added' : 'already exists'}`;
  }
  input.value = '';
  syncDataWithPre();
};

syncDataWithPre();
body {
  font-family: arial, sans-serif;
}
span {
  display: block;
  padding-top: 8px;
  font-weight: 700;
  color: #777;
}
span:empty {
  display: none;
}
.new {
  color: #0a0;
}
.existing: {
  color: #777;
}
<form>
  <input placeholder="New username" />
  <button>Add user</button>
</form>
<span></span>
<pre></pre>

Comments

1

Please have a look on given example

$(document).ready(function(){
  const arr = document.querySelector(".list");
    var abcde = [{ id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 2, username: 'ted' }];
  $("#log").text(JSON.stringify(abcde));
  $("#btnCheckUser").click(function() {
    var tbUsername = $("#tbUsername").val();
    if (abcde.some(obj => obj.username === tbUsername)) {
        alert('existing user ' + tbUsername);
        $("#tbUsername").val('');
        return;
    }
    else {
        abcde.push({ id: abcde.length + 1, username: tbUsername });
        alert('added new user ' + tbUsername);
        $("#log").text(JSON.stringify(abcde));
        $("#tbUsername").val('');
        arr.appendChild(createArray(tbUsername));
        return;
    }
  });
  
  function createArray(name) {
    let li = document.createElement("li");
    li.textContent = name;
    return li;
  }
  abcde.forEach((x) => arr.appendChild(createArray(x.username)));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<p>Add text and click on Check.</p>

<input type="text" id="tbUsername" placeholder="Username" />
<button type="button" id="btnCheckUser">Check</button>

<div class="list">
  <ul></ul>
</div>
<pre id="log"></pre>

5 Comments

This does not add the specified username to the source array, as the question asked.
I think it added a username to the array as asked in question.
Where in the code provided does the new entry get added to the original array, abcde? arr.appendChild(createArray(tbUsername)) deals with a NodeList, not an Array, and abcde.push nver gets called again for new user-entered entries.
The original array in the code is "abcde", and the UL is for the snippet user's convenience in testing the code and making adjustments as needed. Edit: also shows the "abcde" array.
Ah okay I see that now. Thanks for clarifying!
0

Native functions of array are sometimes 3X - 5X times slower than normal loops. Plus native functions wont work in all the browsers so there is a compatibility issues.

My Code:

<script>
  var obj = [];

  function checkName(name) {
    // declarations
    var flag = 0;
    var len = obj.length;   
    var i = 0;
    var id = 1;

    // looping array
    for (i; i < len; i++) {
        // if name matches
        if (name == obj[i]['username']) {
            flag = 1;
            break;
        } else {
            // increment the id by 1
            id = id + 1;
        }
    }

    // if flag = 1 then name exits else push in array
    if (flag == 0) {
      // new entry push in array        
      obj.push({'id':id, 'username': name});
    }
  }
  // function end

  checkName('abc');
</script>

This way you can achieve result faster.

Note: I have not checked if parameter passed is empty or not, if you want you can put a check on it or write a regular expression for particular validation.

Comments

0

xorWith in Lodash can be used to achieve this

let objects = [ { id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 2, username: 'ted' } ]
let existingObject = { id: 1, username: 'fred' };
let newObject = { id: 1729, username: 'Ramanujan' }

_.xorWith(objects, [existingObject], _.isEqual)
// returns [ { id: 2, username: 'bill' }, { id: 2, username: 'ted' } ]

_.xorWith(objects, [newObject], _.isEqual)
// returns [ { id: 1, username: 'fred' }, { id: 2, username: 'bill' }, { id: 2, username: 'ted' } ,{ id: 1729, username: 'Ramanujan' } ]

Comments

0

Check it here :

https://stackoverflow.com/a/53644664/1084987

You can create something like if condition afterwards, like

if(!contains(array, obj)) add();

Comments

0

You can try this also

 const addUser = (name) => {
    if (arr.filter(a => a.name == name).length <= 0)
        arr.push({
            id: arr.length + 1,
            name: name
        })
}
addUser('Fred')

Comments

0
function number_present_or_not() {
  var arr = [2, 5, 9, 67, 78, 8, 454, 4, 6, 79, 64, 688];
  var found = 6;
  var found_two;
  for (i = 0; i < arr.length; i++) {
    if (found == arr[i]) {
      found_two = arr[i];
      break;
    }
  }
  if (found_two == found) {
    console.log('number present in the array');
  } else {
    console.log('number not present in the array');
  }
}

Comments

0

I was given a condition to check the data in the table of the mysql database the object array of my table consist of the id, latitude and longitude as column names, I have to check whether the location is in the database else insert this into the table so: I created a function of handle submit called by a button,

handle Submit = (event) => {
        const latitude = document.getElementById("latitude").innerHTML;
        const longitude = document.getElementById("longitude").innerHTML;
        const found = this.state.data.some((el) => el.latitude === latitude);
    if (!found) {
      Axios.post("http://localhost:3001/api/insert", {
        latitude: latitude,
        longitude: longitude,
      }).then(() => {
        alert("successful insert");
      });
      console.log(latitude, longitude);
    }
  };

Here you can see the conditional statement for inserting if not exist in the database.

Comments

-1
const __checkIfElementExists__ = __itemFromArray__ => __itemFromArray__.*sameKey* === __outsideObject__.*samekey*;

    if (cartArray.some(checkIfElementExists)) {
        console.log('already exists');
    } else {
        alert('does not exists here')

1 Comment

This does add the specified username to the source array, as the question asked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.