在Javascript中创建灵活的联系人数据库-添加、删除和查找联系人_Javascript_Jquery

在Javascript中创建灵活的联系人数据库-添加、删除和查找联系人

javascript jquery

在Javascript中创建灵活的联系人数据库-添加、删除和查找联系人,javascript,jquery,Javascript,Jquery,我需要帮助建立联系人数据库。它是在浏览器中打开的单个页面，用户可以在其中创建新联系人、删除联系人，并使用搜索栏查找现有联系人。每个联系人都应该有姓名、姓氏、电话号码和地址。我已经成功地编写了在数据库中创建新联系人的第一部分代码，但是第二部分和第三部分正在努力从数据库中删除和查找联系人我的Javascript代码： $(document).ready(function() { var database = []; $('.newContact').on('click', function(

我需要帮助建立联系人数据库。它是在浏览器中打开的单个页面，用户可以在其中创建新联系人、删除联系人，并使用搜索栏查找现有联系人。每个联系人都应该有姓名、姓氏、电话号码和地址。我已经成功地编写了在数据库中创建新联系人的第一部分代码，但是第二部分和第三部分正在努力从数据库中删除和查找联系人

我的Javascript代码：

$(document).ready(function() {

var database = [];

$('.newContact').on('click', function(event) {
event.preventDefault();

var user = {};
user.firstName = $('.firstName').val();
user.surname = $('.surname').val();
user.phoneNumber = $('.phoneNumber').val();
user.address = $('.address').val();


database.push(user);
console.log(database);

});
});

我的html代码：

<!doctype html>
<html lang="en">  

<head>
  <title>Codeworks</title>
  <link rel="stylesheet" href="layout.css">
</head>

<body>
  <header>
      <h1>Start of coding assignment</h1>
  </header>

  <main>

    <div class="introduction">
      <h2> What is the assignment? </h2> 
      <div class="introtext">Build a simple address book application using HTML, CSS, JavaScript and jQuery. It is a single page, that opens in the browser, where the user can create new contacts delete                              contacts, and use a search bar to find existing contacts. Each contact should have a name, surname, phone number, and address.<br>
      </div>
    </div>

    <div class="introduction">
          <h2> Create a new contact </h2> 
          <div class="introtext">Please fill in the name, surname, phone number and address in each grid below.<br> </div>
    </div>

    <div>
      <form>
       Name:
      <input class="firstName" type="text" name="firstName" id="firstName"> <br>

       Surname:
      <input class="surname" type="text" name="surname" id="surname"> <br>

      Phone Number:
      <input class="phoneNumber" type="text" name="phoneNumber" id="phoneNumber"> <br>

      Address:
      <input class="address" type="text" name="address" id="address"> <br>

      <button class='newContact' type="submit">Create new contact now!</button>   
      </form>
    </div>


<div class="introduction">
          <h2> Deleting a contact </h2> 
          <div class="introtext">Please fill in the name and surname of the person you would like to remove.<br>
          </div>
    </div>

    <div>
      <form>
      <label for="First name"> Name: </label>
      <input type="text" name="firstName" id="firstName"> <br>

      <label for="Surname"> Surname: </label>
      <input type="text" name="surname" id="surname"> <br>

      <button class='deleteContact' type="submit">Remove contact now!</button>
      </form>
    </div>  



 <div class="introduction">
          <h2> Searching a contact </h2> 
          <div class="introtext">Please fill in the name and surname of the person you would like to search.<br>
          </div>
    </div>

    <div>
      <form action='' method='get'>
      <label for="Search"> Name: </label>
      <input type="text" name="firstName" id="firstName"> <br>

      <label for="Surname"> Surname: </label>
      <input type="text" name="surname" id="surname"> <br>

      <button class='searchContact' type="submit">Search contact now!</button>

      <script src="jquery-3.4.1.min.js"></script>
      <script src='script.js'> </script>



      <div id='result'>TEXT</div>  

  </main>
<footer>   
  <h1>End of Coding assignment</h1>
</footer>

</body>

</html>

我该怎么做

这里的完整代码：

所以我查看了您的代码，我认为您需要首先关注第3步：查找联系人-如果您想删除联系人，您需要首先查找该联系人，对吗？那么让我们关注第一部分

您可以在此处使用此功能：

function findUser(firstName, surname) {
    return database.find(u => database.user.firstName == deleteUserFirstName && database.user.surname == deleteUserSurname);
}

当你在正确的轨道上时，你只是有点偏离了目标。find方法将函数作为参数，将该函数应用于数组中的每个项，并返回数组中使其返回true doc的第一个项。您的变量数据库是一个用户对象数组，您的目标是找到第一个具有给定名字和姓氏的数据库，对吗？因此，上述函数应重写为：

function findUser(firstName, surname) {
    return database.find(user => user.firstName == firstName && user.surname == surname);
}

现在，这个函数将取您给它的名字和姓氏，并在数据库中找到它。您可以找到用户，第3步完成！步骤2现在很简单-您可以使用此新的改进功能查找要删除的用户：

$('.deleteContact').on('click', function(event) {
    event.preventDefault();

    var deleteUserFirstName = $('.firstName').val();
    var deleteUserSurname = $('.surname').val();

    var userToDelete = findUser(deleteUserFirstName, deleteUserSurname);
    const index = array.indexOf(userToDelete);
    if (index > -1) {
        database.splice(index, 1);
    }  
});

这将查找找到的用户的索引，然后将其从数据库中删除。你可以做一些事情来清理和重构你的代码，例如，我建议不要把代码放在匿名函数中，而是创建一个适当的函数来删除一个用户并调用它，但是一旦它工作起来，就可以解决这个问题，因为这似乎是为了分配任务，而你已经用完了时间

我修改了我的html和js代码，想知道你是否可以再看一眼？我想我取得了不错的进步。你能找出剩下的错误吗

几个具体问题： 1如何确保已定义数组？ 2删除和查找功能似乎还不起作用。怎么了

理想情况下，我必须在今晚欧洲时间之前找到答案

<!doctype html>
<html lang="en">  

<head>
  <title>Codeworks</title>
  <link rel="stylesheet" href="layout.css">
</head>

<body>
  <header>
      <h1>Start of coding assignment</h1>
  </header>

  <main>
    <div class="introduction">
      <h2> What is the assignment? </h2> 
        <div class="introtext">
          Build a simple address book application using HTML, CSS, JavaScript and jQuery. <br>
          It is a single page, that opens in the browser, where the user can create new contacts delete  contacts, and use a search bar to find existing contacts.<br> 
          Each contact should have a name, surname, phone number, and address.<br>
        </div>
    </div>

    <div class="introduction">
       <h2> Create a new contact </h2> 
          <div class="introtext">
            Please fill in the name, surname, phone number and address of the person you would like to add in each grid below and press "Create new contact now".<br> 
            Please fill in the name and surname of the person you would like to remove and press "Remove contact now".<br>
            Please fill in the name and surname of the person you would like to search and press "search contact now".<br>     
          </div>
    </div>

    <form>
       Name: <input class="firstName" type="text" name="firstName" id="firstName"> <br>
       Surname: <input class="surname" type="text" name="surname" id="surname"> <br>
       Phone Number: <input class="phoneNumber" type="text" name="phoneNumber" id="phoneNumber"> <br>
       Address: <input class="address" type="text" name="address" id="address"> <br>

      <button class='newContact' type="submit">Create new contact now!</button>   
      <button class='deleteContact' type="submit">Remove contact now!</button>
      <button class='searchContact' type="submit">Search contact now!</button>
    </form>

      <div id='result'>TEXT</div>  

  </main>
<footer>   
  <h1>End of Coding assignment</h1>
</footer>
       <script src="jquery-3.4.1.min.js"></script>
       <script src='script.js'> </script>


</body>

</html>

你想办法解决这个问题？您的数据库是一个简单的数组。您可以通过搜索并使用删除元素

var database = [];

$(document).ready(function() {


$('.newContact').on('click', function(event) {
event.preventDefault();

var user = {};
user.firstName = $('.firstName').val();
user.surname = $('.surname').val();
user.phoneNumber = $('.phoneNumber').val();
user.address = $('.address').val();


database.push(user);
console.log(database);

});
});

function findUser(firstName, surname) {
    return database.find(user => user.firstName == firstName && user.surname == surname);
}

$('.searchContact').on('click', function(event) {
    event.preventDefault();

    var findUserFirstName = $('.firstName').val();
    var findUserSurname = $('.surname').val();
    var userFound = findUser(findUserFirstName,findUserSurname);  
    $('#result').text(userFound);
});


$('.deleteContact').on('click', function(event) {
    event.preventDefault();

    var deleteUserFirstName = $('.firstName').val();
    var deleteUserSurname = $('.surname').val();

    var array = [];
    var userToDelete = findUser(deleteUserFirstName, deleteUserSurname);
    const index = array.indexOf(userToDelete);
    if (index > -1) {
        database.splice(index, 1);
    }  
});