Javascript/数组/删除一个对象/添加一个对象答案

【问题标题】：Javascript/ Arrays/ Delete an object/ Add an objectJavascript/数组/删除一个对象/添加一个对象
【发布时间】：2017-06-18 20:42:41
【问题描述】：

我需要完成一些任务才能获得作为前端开发人员的实习机会。任务是：

创建一个仪表板，我可以在其中查看员工和客户。见附件。

请求：

动态显示两个员工和客户的列表数组。
可以删除除最后一个之外的所有员工。
可以添加新客户。

我已经完成了所有这些任务，但是我在第 3 项任务中遇到了问题。我找到了应该删除的“员工”数组对象的索引，该函数从数组中删除所选对象，但是如何在输入字段中显示此更改（从显示的员工列表中删除所选对象）？请帮帮我！！！

var employees = [
  {
    firstname: "Dorin",
    lastname: "Petrescu"
  },
  {
    firstname: "Sergiu",
    lastname: "Galescu"
  },
  {
    firstname: "Vasile",
    lastname: "Marcu"
  },
];


var customers = [
  {
    firstname: "Valentin",
    lastname: "Condratiuc"
  },
  {
    firstname: "Petru",
    lastname: "Lesco"
  },
  {
    firstname: "Oleg",
    lastname: "Tataru"
  },
];


//1) Display the list of customers and employees
function init(){
  // document.getElementById("names").value = "";
    document.getElementById("names").value = localStorage.getItem("user");
    for ( i = 0; i < customers.length; i++) {
      var needed_area = document.getElementById("names");
      needed_area.value +="\n"+ customers[i].firstname +" " + customers[i].lastname;
}
}

function init2(){
  for ( i = 0; i < employees.length; i++) {
    var selected_area = document.getElementById("names2");
    selected_area.value +="\n"+employees[i].firstname +" " + employees[i].lastname;
  }
}




//2) Delete a Specific Employee

function delete_employee() {
  var delete_item = prompt ("The name of employee you want to delete");
  index = employees.findIndex(x => x.firstname==delete_item);
  console.log(index);
  employees.splice(index, 1);
  var selected_area = document.getElementById("names2");

}




//3) New Customers can be added :
function push_new_customer() {
  var selected_name = prompt("The name of the new customer!");
  var selected_surname = prompt("The surname of the new customer!");
  customers.push({ firstname: selected_name, lastname: selected_surname });
  var needed_area = document.getElementById("names");
  needed_area.value+="\n" +selected_name+ " " +selected_surname;
  // localStorage.setItem("user", needed_area.value);

}

textarea {
      height: 200px;
      width: 250px;
    }

<body onload="init(); init2();">
  <table border="1">
    <tr>
      <td>
        <h2>New Customer</h2>
      </td>
      <td>
        <h2>Registered Customers</h2>
      </td>
      <td>
        <h2>Delete an employee</h2>
      </td>
      <td>
        <h2>Current Employees</h2>
      </td>
    </tr>
    <tr>
      <td>
        <!-- <input type="text" placeholder="your name" id="add" onkeypress="handleKeyPress(event)"> -->
        <button onclick="push_new_customer();" type="button" name="button">Add a new customer!</button>
      </td>
      <td>
        <textarea id="names">
        </textarea>
      </td>
      <td>
        <!-- <input type="text" placeholder="your name" id="add" onkeypress="handleKeyPress(event)"> -->
        <button onclick="delete_employee();" type="button" name="button">Delete an employee</button>
      </td>
      <td>
        <textarea id="names2">

        </textarea>
      </td>
    </tr>


  </table>

</body>

我附上了一些图片来解释我的问题。

【问题讨论】：

调用 init() ？并在这样做之前清除内容

标签： javascript arrays arraylist

【解决方案1】：

考虑到您的代码结构以及您使用的是 textarea 的事实，您可以清除选择并调用您创建的 init2 函数：

function delete_employee() {
  var delete_item = prompt ("The name of employee you want to delete");
  index = employees.findIndex(x => x.firstname==delete_item);
  console.log(index);
  employees.splice(index, 1);
  var selected_area = document.getElementById("names2");
  selected_area.value = "";
  init2();
}

但如果你使用一些库/框架来绑定视图和模型会更好。

【讨论】：