help removing an element from an array (not pop/shift)

[devout remnant]

hello
so i ma trying to remove an element from an array that matches an ID but unfortunately the pop/shift methods only remove an element from an array at the beginning or end. I tried splice(), unfortunately delivered thesame resslt. perhaps i wrote my code wrong

[rough eagle]

the .filter() method doesn't return a single result but it will return a new array. The array will contain all the elements which "pass" the conditions of the function that you specify... so, given that knowledge here's one way to filter out the id that you pass:

newTweetData = newTweetData.filter(function(tweet) {
  return tweet.uuid !== tweetId;
}

In the above you get an array where the tweet.id != tweetId...

There are other ways to do this by using .find() with .splice() if that's what you want/need.

[devout remnant]

I did as u mentioned And it worked!!!!🥲

Thanks

i forgot to remove[0]

l

Coding is easy yet hard! my brain alway think complex when there is an easy fix! this makes so much Sense!

thanksssss!

[rough eagle]

👍

[craggy marlin]

Interesting, thanks both.

[devout remnant]

hello, here once again

trying to do the same thing with reply delete btn. but i got stuck

[karmic ravine]

What's wrong with it? Looks like you get an array of 2 elements, so one among the three has been removed, isn't it? You just have to set the results to the variable being rendered, no?

By the way, for you first issue, .splice() could work if you use it properly. The difference is that it will mutate the array directly.

Considering a stack of cards:

function removeItem(cards, position) {
  // The card will be removed from the array by mutating the original array~
  cards.splice(position, 1);
  return cards; // It's optional to return it, since the original array has already changed.
  /* Without mutating the original array, the following would be the correct implementation:
  return cards.filter((_, index) => index !== position);
   */
}

[devout remnant]

thanks, i will look into it. i called the render function and it doesnt seem to work.

[karmic ravine]

Yes, but you render without changing any state. You just get your result in new variables, isn't it?

[devout remnant]

i dont understand. please explain further

[karmic ravine]

I don't know your code perfectly but here you have an already existing variable newDataTweet and you change it, before rendering.
In the last one, you create new variables with let and don't change any existing one. These variables only exist in this scope, and don't affect anything else in the app.

[devout remnant]

i tried changing it but it gave me an error

[devout remnant]

https://scrimba.com/scrim/caDapkfP

link to scrim

[karmic ravine]

function handleClickDeleteReply(replyId) {
    newTweetData.forEach(tweet => {
        tweet.replies = tweet.replies.filter(reply => reply.uuid !== replyId);
    })
    render()
}

You need to update the array of replies. Note that tweet being an object, it's replies key can be updated, mutating the object directly, and allowing the render to work correctly. This way should work but not be the most efficient, since we are going through every tweet.

You could send the id of the tweet to your function as well, or it's index, so we would not need to loop over the full array.
If not, I give you another option, to avoid looping through all the tweets:

function handleClickDeleteReply(replyId) {
    // We use a for loop because we can break a for loop, but not a forEach~
    for (const tweet of newTweetData) {
        let index = tweet.replies.findIndex(reply => reply.uuid === replyId);
         // This will return -1 if it is not found, and the following conditon will be equal to false if index is -1~
        if (~index) {
            tweet.replies.splice(index, 1);
            break;
        }
    }
    render()
}

With that, it will stop once it has find and removed the reply to delete.

[devout remnant]

Thanks

[devout remnant]

it worked! the first solution worked. i used filter within filter! i tried the 1st. it is simpler and easier . The 2nd solution worked! i should have asked for help sooner! thank you! my deficiencies are understanding what each loop does and so i use the wrong ones.

[open phoenix]

try as I might, this solution isn't working for me. I don't know what I'm doing wrong

I see your array is no longer tweetsData. Did you change the variable name for the imported file?

[open phoenix]

Please can you show me what I did wrong

[karmic ravine]

Same issue...
You're not changing your state, so it will render the same as before...
If your project render tweetsData, update it, not a random variable like targetObj that you will never use...

[open phoenix]

Thank you

It's worked finally