Блог

Главная - Вопросы по программированию - Добавление нового элемента в массив объектов и отображение в HTML

Добавление нового элемента в массив объектов и отображение в HTML

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть массив объектов, который будет заполнен новыми объектами после заполнения a form и вызова addEventListener submit .

Я попытался push создать новый объект внутри event listener , но похоже, что он работает только внутри области действия функции. Есть ли другой способ добавить этот новый объект в массив?

Вот мой код:

 const empleados = [{
    nombre: "Kevin",
    apellido: "Malone",
    edad: 30,
  },
  {
    nombre: "Pam",
    apellido: "Beesley",
    edad: 69,
  },
  {
    nombre: "Jim",
    apellido: "Halpert",
    edad: 40,
  },
];
const form = document.querySelector("form");
const table = document.querySelector(".table");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  let nuevoEmpleado = {
    nombre: form.name.value,
    apellido: form.lastname.value,
    edad: form.age.value,
  };
  empleados.push(nuevoEmpleado);
  form.reset();
});
empleados.forEach((chabon) => {
  let html = `<div class="table">
<div class="empleado"><span class="name">Nombre: ${chabon.nombre}</span> <span class="apellido">Apellido: ${chabon.apellido}</span> <span class="edad">Edad: ${chabon.edad}</span></div>
</div>`;
  table.innerHTML  = html;
});  
 form {
  display: flex;
  flex-direction: column;
}

button {
  width: 30%;
}

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid purple;
}  
 <div>
  <form action="">
    <span>Nombre</span><input type="text" class="name" name="name">
    <span>Apellido</span><input type="text" class="lastname" name="lastname">
    <span>Edad</span><input type="text" class="age" name="age">
    <button>Agregar</button>
  </form>
  <div class="table">
    <div class="empleado"><span class="name"></span><span class="edad"></span></div>
  </div>
</div>

Комментарии:

1. Почему вы вызываете empleados.push(nuevoEmpleado); перед созданием объекта?

2. извините, я забыл удалить эту часть кода, теперь все в порядке

Ответ №1:

На самом деле, ваша текущая функция помещает новый объект ( nuevoEmpleado ) в массив, вы не видите его только потому, что вы не обновляете DOM / HTML или даже не регистрируете массив после ввода новых объектов.

Итак, создайте функцию, которая печатает empleados в вашей таблице. Вызывайте эту функцию при инициализации и каждый раз, empleado когда добавляется новый.

Смотрите приведенный ниже код и комментарии внутри него

 const empleados = [{
    nombre: "Kevin",
    apellido: "Malone",
    edad: 30,
  },
  {
    nombre: "Pam",
    apellido: "Beesley",
    edad: 69,
  },
  {
    nombre: "Jim",
    apellido: "Halpert",
    edad: 40,
  },
];

const form = document.querySelector("form");
const table = document.querySelector(".table");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  let nuevoEmpleado = {
    nombre: form.name.value,
    apellido: form.lastname.value,
    edad: form.age.value,
  };

  empleados.push(nuevoEmpleado);

  form.reset();
  //"re-print" the empleados, calling the function that does it
  printEmpleados();
});

//HERE: new function that "prints" the empleados to the table
printEmpleados = function() {
  //clear the table HTML before fill it again
  table.innerHTML = "";
  empleados.forEach((chabon) => {
    let html = `<div class="table">
<div class="empleado"><span class="name">Nombre: ${chabon.nombre}</span> <span class="apellido">Apellido: ${chabon.apellido}</span> <span class="edad">Edad: ${chabon.edad}</span></div>
</div>`;
    table.innerHTML  = html;
  });
}

//call at startup to start showing 
printEmpleados();  
 form {
  display: flex;
  flex-direction: column;
}

button {
  width: 30%;
}

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid purple;
}  
 <div>
  <form action="">
    <span>Nombre</span><input type="text" class="name" name="name">
    <span>Apellido</span><input type="text" class="lastname" name="lastname">
    <span>Edad</span><input type="text" class="age" name="age">
    <button>Agregar</button>
  </form>
  <div class="table">
    <div class="empleado"><span class="name"></span><span class="edad"></span></div>
  </div>
</div>

Ответ №2:

Ваша проблема не в том, что в массиве нет обновления, потому что это явно работает.

Просто добавьте console.log(empleados); сразу после empleados.push(nuevoEmpleado);

Ваша проблема в том, что вы не видите никаких обновлений в своем HTML. И это потому, что после этого вы не обновляете таблицу.