Kevin Powell - Community•2y ago

Issues with Splice

im trying to remove certain object from an array of object, when first object is clicked to remove its removes that object but when i click on second it removes the entire objects from an array.

JS let database = {
  membersList: [
    {
      firstName: "Avinash",
      lastName: "Tallapaneni",
      emailID: "[email protected]",
      avatar:
        "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
    },
    {
      firstName: "Icey",
      lastName: "Mint",
      emailID: "[email protected]",
      avatar:
        "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
    },
    {
      firstName: "Billy",
      lastName: "Schneider",
      emailID: "[email protected]",
      avatar:
        "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
    },
  ],
  mainboard: [],
};



const removeMembermodal = document.querySelector(".remove-member");
const removeMemberConfirmation = document.querySelector(
  ".remove-member-footer"
);

const removeMember = () => {
  const removeMemberBtn = document.querySelectorAll(".remove-btn");
  removeMemberBtn.forEach((value) => {
    value.addEventListener("click", () => {
      
      removeMemberConfirmation.addEventListener("click", () => {
        let dataValue = value.getAttribute("data-value");
        database.membersList.splice(dataValue - 1, 1);
        removeMembermodal.style.display = "none";
        console.log(database.membersList);
        teamMemberUpdateUI();
      });
    });
  });
};

JS let database = {
  membersList: [
    {
      firstName: "Avinash",
      lastName: "Tallapaneni",
      emailID: "[email protected]",
      avatar:
        "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
    },
    {
      firstName: "Icey",
      lastName: "Mint",
      emailID: "[email protected]",
      avatar:
        "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
    },
    {
      firstName: "Billy",
      lastName: "Schneider",
      emailID: "[email protected]",
      avatar:
        "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1060&t=st=1682835995~exp=1682836595~hmac=2eb8988eed164052bb122a0be1de8ba56f9cc7bebab4a44009528eb80fdb39f5",
    },
  ],
  mainboard: [],
};



const removeMembermodal = document.querySelector(".remove-member");
const removeMemberConfirmation = document.querySelector(
  ".remove-member-footer"
);

const removeMember = () => {
  const removeMemberBtn = document.querySelectorAll(".remove-btn");
  removeMemberBtn.forEach((value) => {
    value.addEventListener("click", () => {
      
      removeMemberConfirmation.addEventListener("click", () => {
        let dataValue = value.getAttribute("data-value");
        database.membersList.splice(dataValue - 1, 1);
        removeMembermodal.style.display = "none";
        console.log(database.membersList);
        teamMemberUpdateUI();
      });
    });
  });
};

the issue is most definitely with splice. ANyone knows how to fix this?

7 Replies

Zoë•2y ago

The issue is that you start off with

avinashta... with data-value 1
iceymint with data-value 2
billy with data-value 3

avinashta... with data-value 1
iceymint with data-value 2
billy with data-value 3

The first removal works fine, it gets data-value 1 then runs splice(0,1) which removes the first entry You're left with

iceymint with data-value 2
billy with data-value 3

iceymint with data-value 2
billy with data-value 3

So you click iceymint and it gets data-value 2 then runs splice(2,1) which removes billy because they're in position 2 now However this should just leave iceymint behind, but looking at the console log console.log(database.membersList) is ran twice. This seems to be because every time you click to intend to delete a user the confirmation button gets another click event listener added. The first delete sets one to remove at index 1, then when you delete the second time there's already a deletion at index 1 with another deletion at index 2 So, to solve this I would instead of storing indexes in data-value I would store a key for instance it could just be their email. Then rather than use splice use something like

const email = value.getAttribute('data-value');
database.membersList = 
  database.membersList
  .filter(({emailId}) => emailId != email);

const email = value.getAttribute('data-value');
database.membersList = 
  database.membersList
  .filter(({emailId}) => emailId != email);

Also move the confirmation click listener to outside so it's only activated once. This leaves the issue of passing which one was clicked to the confirmation box and I'd have an object that relates to the confirmation box contain that value Or remove the event listener from the confirmation button

AvinashOP•2y ago

after deleting the first user im running this again

 const teamMemberUpdateUI = () => {
  let temp = "";
  let index = 1;
  for (const value of database.membersList) {
    temp += `<div class="team-member">
    <img src="${value.avatar}" alt="avatar" />
    <div class="team-member-details">
      <div class="name">${value.firstName + " " + value.lastName}</div>
      <div class="email">${value.emailID}</div>
    </div>
    <div class="remove-btn" data-value = ${index}> 
      <svg>
        <use href="icons.svg#IcOutlineAdd"></use>
      </svg> 
    </div>
  </div>`;
    index++;
  }
  teamMemberCollection.innerHTML = temp;
  removeMember();
};

 const teamMemberUpdateUI = () => {
  let temp = "";
  let index = 1;
  for (const value of database.membersList) {
    temp += `<div class="team-member">
    <img src="${value.avatar}" alt="avatar" />
    <div class="team-member-details">
      <div class="name">${value.firstName + " " + value.lastName}</div>
      <div class="email">${value.emailID}</div>
    </div>
    <div class="remove-btn" data-value = ${index}> 
      <svg>
        <use href="icons.svg#IcOutlineAdd"></use>
      </svg> 
    </div>
  </div>`;
    index++;
  }
  teamMemberCollection.innerHTML = temp;
  removeMember();
};

so data attribute is reset once again

Zoë•2y ago

Also for syntax highlighting you want to put the "js" on the same line as ```js

Zoë•2y ago

You'll need to replace

<div class="remove-btn" data-value = ${index}>

<div class="remove-btn" data-value = ${index}>

with

<div class="remove-btn" data-value = ${value.emailID}>

<div class="remove-btn" data-value = ${value.emailID}>

Or you could give users a unique id and then use that, email was the only thing from the data you provided that was unique. An id would be better. You can use the uuid library https://www.npmjs.com/package/uuid to do that

npm

uuid

RFC4122 (v1, v4, and v5) UUIDs. Latest version: 9.0.0, last published: 8 months ago. Start using uuid in your project by running npm i uuid. There are 53433 other projects in the npm registry using uuid.

AvinashOP•2y ago

i will try this. also im confused when you said i need to confirmation click outside, i did that . it wasnt working anf the value it retuned was undefined

Zoë•2y ago

That's because you were passing in value from the first click, but outside value is undefined. You need to pass value some other way

ME•2y ago

I had this issue, I just used jquery

Gaming

Programming

Issues with Splice