Пропустить при вставке, если объект с таким же значением свойства уже существует - PullRequest
Новая
       12

Пропустить при вставке, если объект с таким же значением свойства уже существует

0 голосов
/ 29 марта 2020

Итак, я думаю, что это должно быть довольно легко, но я занимался этим часами и не могу найти решение.

Я создал регистрацию; кнопка регистрации имеет функцию, которая принимает значение адреса электронной почты и запускает для всех объектов значение l oop, чтобы проверить, существует ли уже значение. Если он существует, он должен сказать «У вас уже есть учетная запись» и прекратить, а если он не существует, он должен go вперед и pu sh массив в объект.

Однако в настоящее время он обрабатывает каждый элемент массива, а не проверяет только типизированное значение.

Код ниже: 

let usersObj = [
{
    firstName: "James",
    age: 22,
    username: "James@gmail.com",
    password: "codity"
},
{
    firstName: "Ellen",
    age: 32,
    username: "Ellen@gmail.com",
    password: "laura" 
},
{
    firstName: "Lynn",
    age: 16,
    username: "Lynn@gmail.com",
    password: "chicken"   
},

]; 

$('#signUpSubmitBtn').on('click', function() {
    getUserSignUpData();
})
;
function getUserSignUpData() {
    let signUserName = $('#signUserName').val()
    let signUserAge = $('#signUserAge').val()
    let signUserEmail = $('#signUserEmail').val()
    let signUserPassword = $('#signUserPassword').val()

    for(i = 0; i < usersObj.length; i++) {
       if(signUserEmail == usersObj[i].username) {
        console.log('You already have an account!')
       } else{
        usersObj.push(
            {firstName: signUserName, age: signUserAge, username: signUserEmail, password: signUserPassword});
        console.log(usersObj);
       }


// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );

let usersObj = [
    {
        firstName: "James",
        age: 22,
        username: "James@gmail.com",
        password: "codity"
    },
    {
        firstName: "Ellen",
        age: 32,
        username: "Ellen@gmail.com",
        password: "laura" 
    },
    {
        firstName: "Lynn",
        age: 16,
        username: "Lynn@gmail.com",
        password: "chicken"   
    },
];

console.log(usersObj)

// Log in

$('#loginSubmitBtn').on('click', function() {
    getUserLogin();
});


function getUserLogin() {
let username = $('#userEmail').val()
let password = $('#userPassword').val()

for(i = 0; i < usersObj.length; i++) {
    if(username == usersObj[i].username && password == usersObj[i].password) {
        console.log("Hi " + usersObj[i].firstName + ',' + ' You have succesfully logged in!');
        return
    } else if(username == usersObj[i].username && password !== usersObj[i].password) {
           console.log('Invalid user information');
           $('#loginErrorText').text('Invalid user information');
           return
           };
  }
  console.log("You don't have an account.");
  $('#loginErrorText').text("You don't have an account.");
};

// END Log in

// Sign Up

$('#signUpSubmitBtn').on('click', function() {
    getUserSignUpData();
});

function getUserSignUpData() {
    let signUserName = $('#signUserName').val()
    let signUserAge = $('#signUserAge').val()
    let signUserEmail = $('#signUserEmail').val()
    let signUserPassword = $('#signUserPassword').val()
    

    for(i = 0; i < usersObj.length; i++) {
       if(signUserEmail == usersObj[i].username) {
        console.log('You already have an account!');
       } else{
        usersObj.push(
            {firstName: signUserName, age: signUserAge, username: signUserEmail, password: signUserPassword});
        console.log(usersObj)
       };
    } ;
};



// console.log('You already have an account!');
//         $('#existingEmailWarningText').text('Account already exists!')


// Show / Hide Forms 

logInForm
signupForm

// Btn:
loginRef
signupRef

$('#logInForm').hide();

$('#loginRef').on('click', function() {
  $('#logInForm').show();
  $('#signupForm').hide();
});

$('#signupRef').on('click', function() {
    $('#logInForm').hide();
    $('#signupForm').show();
  });









// The END
});
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">

    <!-- Link to style.css sheet -->
    <link rel="stylesheet" href="style.css">

    <title>Hello, world!</title>
</head>

<body>

    <section class="mt-4">
        <div class="container">
            <div class="jumbotron">
                <div>
                    <h3 class="text-primary">
                        Login
                    </h3>
                </div>
            </div>
        </div>
    </section>

    <section class="text-center">



        <div class="container">
            <!-- ROW 1 -->
            <div class="row">
                <!-- COL 1 -->
                <div class="col">

                </div>
                <!-- COL 2 -->
                <div class="col">
                    <div id="logInForm">
                        <h3>Log in</h3>
                        <hr>
                        <form action="">
                            <!-- User Email -->
                            <div class="form-group">
                                <label for="userEmail">Your email</label>
                                <input id="userEmail" class="form-control" type="email">
                            </div>
                            <!-- User Password -->
                            <div class="form-group">
                                <label for="userPassword">Your password</label>
                                <input id="userPassword" class="form-control" type="password">
                            </div>
                            <!-- Login button -->
                            <div class="form-group">
                                <button type="button" id="loginSubmitBtn" class="btn btn-primary form-control">Login</button>
                            </div>
                            <span class="text-danger mt-1" id=""><small id="loginErrorText"></small></span>
                            <small class="d-block">No account? <a id="signupRef" href="#">Signup Now</a></small>
                        </form>
                    </div>
                </div>
                <!-- COL 3 -->
                <div class="col">

                </div>
            </div>

            <!-- ROW 2 -->
            <div class="row">
                <!-- COL 1 -->
                <div class="col">

                </div>
                <!-- COL 2 -->
                <div class="col">
                    <div id="signupForm">
                        <h3>Sign up</h3>
                        <hr>
                        <form action="">
                            <!-- User name -->
                            <div class="form-group">
                                <label for="signUserName">Your name</label>
                                <input id="signUserName" class="form-control" type="text">
                            </div>
                            <!-- User age -->
                            <div class="form-group">
                                <label for="signUserAge">Your birth date</label>
                                <input id="signUserAge" class="form-control" type="date">
                            </div>
                            <!-- User Email -->
                            <div class="form-group">
                                <label for="signUserEmail">Your email</label>
                                <input id="signUserEmail" class="form-control" type="email">
                                <span class="text-danger" id=""><small id="existingEmailWarningText"></small></span>
                            </div>
                            <!-- User Password -->
                            <div class="form-group">
                                <label for="signUserPassword">Your password</label>
                                <input id="signUserPassword" class="form-control" type="password">
                            </div>
                            <!-- Login button -->
                            <div class="form-group">
                                <button type="button" id="signUpSubmitBtn" class="btn btn-primary form-control">Sign up</button>
                            </div>
                            <small>Already have an account? <a id="loginRef" href="#">Log in</a></small>
                        </form>
                    </div>
                </div>
                <!-- COL 3 -->
                <div class="col">

                </div>
            </div>
        </div>

    </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>

    <!-- Link to function.js sheet -->
    <script src="function.js"></script>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Ваш for(... l oop должен пройти через ваш массив учетных записей, чтобы проверить, существует (или нет) целевая электронная почта, и после этого (если дубликатов не существует ) pu sh объект в ваш массив.

Итак, ваш код будет выглядеть примерно так: 

let duplicateExists = false
for(i = 0; i < usersObj.length; i++) {
       if(signUserEmail == usersObj[i].username) {
         duplicateExists = true
         break
       }
}
if(!duplicateExists) usersObj.push({firstName: signUserName, age: signUserAge, username: signUserEmail, password: signUserPassword})

Однако я бы порекомендовал другой способ - использовать Array.prototype.some() (чтобы проверить, имеет ли какая-либо запись дублирующую username) и проверку состояния короткого замыкания перед загрузкой данных формы в результирующий массив: 

const usersObj = [{firstName:"James",age:22,username:"James@gmail.com",password:"codity"},{firstName:"Ellen",age:32,username:"Ellen@gmail.com",password:"laura"},{firstName:"Lynn",age:16,username:"Lynn@gmail.com",password:"chicken"}],
      dup = {firstName: 'Bill', age:48, username: 'Ellen@gmail.com', password: 'password'},
      nodup = {firstName: 'Bill', age: 48, username: 'Bill@gmail.com', password: 'password'},
      result = []

      const getUserSignUpData = (signupUserData) => {
        !usersObj.some(({username}) => 
          username == signupUserData.username) && result.push(signupUserData)
      }
      
getUserSignUpData(dup) // no entries are inserted due to duplicate username
getUserSignUpData(nodup) // nodup object is inserted as username is unique

console.log(result)
.as-console-wrapper{min-height:100%;}
0 голосов
/ 29 марта 2020

Этого можно добиться, циклически просматривая массив объектов каждый раз с помощью some(), и, если не найдено совпадений, отправляя новый объект в массив: 

let usersObj=[{firstName:"James",age:22,username:"James@gmail.com",password:"codity"},{firstName:"Ellen",age:32,username:"Ellen@gmail.com",password:"laura"},{firstName:"Lynn",age:16,username:"Lynn@gmail.com",password:"chicken"}];

document.getElementById("submit").onclick = (e) => {
  console.clear()
  e.preventDefault()
   let form = document.getElementById("form")
   
   if(!usersObj.some(el => el.username === form.username.value)){
       let newUserObj = {
          firstName: form.firstName.value,
          age: form.age.value,
          username: form.username.value,
          password: form.password.value,
       }
       usersObj.push(newUserObj)
       console.log("new user added", newUserObj)
   }else{
      console.log("user already exists")
   }
}
input{position: absolute;left: 100px}
<form id="form">
    First Name: <input type="text" name="firstName" /><br>
    Age: <input type="text" name="age" /><br>
    Username: <input type="text" name="username" value="James@gmail.com" /><br>
    Password: <input type="text" name="password" /><br>
    
    <input type="submit" id="submit">
</form>
...