How To Search In Array Of Objects - Javascript

I am having issues searching in an array of objects. Basically what my page needs to do is to create a new 'client' using information entered by me, such as Full name, User name, E

Solution 1:

Several problems with your for loop.

for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i] == user) {
    found = true;
}else{
    found = false;
}

So what are we working with? clientlist is array so clientlist[i] is an element of that array...which happens to be an object.

user value is a string so there is no way to equate a string to object in the if.

Correction there would be to inspect the correct property value in object:

if (clientlist[i].username == user) {

Next problem is that the loop keeps going even if a match is found. As loop continues found will be updated for each iteration. Thus found will only be set based on the very last object in array regardless if a match was already determined.

To correct this could put that for loop in a function so it breaks the loop by returning true if match is found. Alternative would be use other array methods like Array.prototype.some() which returns a boolean based on conditional in callback. Or use break if a match is found to prevent loop continuing.

break will be simplest to plugin to the code so final would be

for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i].username == user) {
    found = true;
    break;// quit loop since we found a match
}else{
    found = false;
}

Solution 2:

You need to change this

for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i] == user) {
        found = true;
    }else{
       found = false;
    }
}

to

var found = false;
for (var i = 0; i < clientlist.length; i++) {
    if (clientlist[i].username == user) {
        found = true;
        break;
    }
}

Solution 3:

You can use Array#some for this: It lets you run a callback against each entry in an array and determine if it matches a condition. some stops and returns true the first time you return a truthy value from the callback, or returns false if no calls to the callback return a truthy value.

So:

if (clientlist.some(function(entry) { return entry.username === user; })) {
    $("#msj").html("User already exists");
} else {
    // ...add the user...
}

That's more concise with ES2015+ arrow functions:

if (clientlist.some(entry => entry.username === user)) {
    $("#msj").html("User already exists");
} else {
    // ...add the user...
}

Also note that you don't want to reuse the same Client object each time, because on the next add, you'll just change the existing object's properties. Instead, create a new object each time:

clientlist.push({
    username: user,
    fullname: $("#fullname").val(),
    email: $("#email").val(),
    type: "client",
    password: $("#password").val()
});

var clientlist = [{"username":"John","fullname":"John Doe",
"email":"john.doe@hotmail.com","type":"client","password":"jdoe2"}];

function NewClient() {
    var user = $("#username").val();
    if (clientlist.some(function(entry) { return entry.username === user; })) {
        $("#msj").html("User already exists");
    } else {
      clientlist.push({
        username: user,
        fullname: $("#fullname").val(),
        email: $("#email").val(),
        type: "client",
        password: $("#password").val()
      });
      $("#username, #fullname, #email, #password").val("");
      $("#msj").html("New client has been created");
    }
}
$("#btn").on("click", NewClient);

<div>
  <label>
    Username: <input type="text" id="username">
  </label>
</div>
<div>
  <label>
    Fullname: <input type="text" id="fullname">
  </label>
</div>
<div>
  <label>
    Email: <input type="text" id="email">
  </label>
</div>
<div>
  <label>
    Password: <input type="password" id="password">
  </label>
</div>
<div><input type="button" id="btn" value="Add"></div>
<div id="msj"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>