1

I am using simple JavaScript code to submit a form and storing the form data into an array in the form of objects and later showing the data on click of a button. I also have provided two buttons -'EDIT' and 'DELETE' for each elements while showing the data in tabular form under 'Action' header.

I can pass the corresponding ids to those methods to perform edit and delete operation on specific entries/object and based on that I want to keep data in final array and want to show them after the operation.

However I have done the 'delete' functionality but I could not get any lead to implement the 'EDIT' button functionality. I want to know- is it possible to prepopulate the form with data available and make the changes and again save it back when I click on edit button?

Note: I am not using any database connection for this. Here in the below code I am storing the objects in dataArray

sample form object- I am storing dataArray after submit:

0: CreateUser
description: "I am Web developer"
email: "test@gmail.com"
english: "english"
gender: "Male"
hindi: "hindi"
id: "12312"
name: "test"
othersLang: "others"
role: "dev"

Please have a look at it ---


function getEmployeeDetails() {
  let totalLength = userArray.length;

  if (totalLength === 0) {
    alert("No user Data Found");
    return;
  }

  let tbody = document.getElementById("tbody");
  tbody.innerHTML = "";

  for (let i = 0; i < userArray.length; i++) {
    let tr = `<tr id=` + userArray[i].id + `>`;
    tr +=
      "<td class='table-data'/td>" +
      userArray[i].id +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].name +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].email +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].gender +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].role +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].english +
      userArray[i].hindi +
      userArray[i].othersLang +
      "</td>" +
      "<td class='table-data'/td>" +
      userArray[i].description +
      "</td>" +
      `<td class="table-data">
      <button onclick="deleteUser(` +
      userArray[i].id +
      `)">Delete</button> || <button onclick="editUser( ` +
      userArray[i].id +
      `)">Edit</button>
      </td>`;

    tbody.innerHTML += tr;
  }
}

function deleteUser(id) {
  console.log('ID',id);
  userArray = userArray.filter(x => x.id === id);
  console.log("aftre", userArray);
  let elem = document.getElementById(id);
  elem.remove();
  return userArray;
}
function editUser(id) {
  console.log("edit", id);//prints corresponding id
}

I am not sure if this can be achieved or not.

Any suggestion on this is highly appreciated.

norbitrial
  • 14,716
  • 7
  • 32
  • 59
Souradip
  • 111
  • 1
  • 10

1 Answers1

0

I'm not sure I understand what you're trying to achieve, but if you're trying to prepopulate your page without the use of any database, you could use a file with some json data in it. see JavaScript: Create and save file Or you could pretty much hardcode it into your page on an on-load event.

On a side note, if you know you're not going to work with Internet Explorer you could use the find() function instead of the filter(), as find() will stop its iteration on the array once it finds the FIRST occurrence of whatever you passed in its function, and filter() will just keep going. Seeing as you're trying to get data using a unique ID, it might be better to use it instead :) see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Ofek Tsoref
  • 9
  • 1
  • 8