Remove model from array with angular

Question

I have a list of posts in my component that I retreive by using this code:

export class PostsComponent implements OnInit
{
    posts;

    constructor(private http: Http) { }

    ngOnInit: void()
    {
        this.http.get('/posts').map(res => res.json()).subscribe(res => this.posts = res);
    }

    delete(post)
    {
        this.http.post('/posts/delete'+ post.id)
            .subscribe(res =>
            {
                // delete post from posts, but how?
            });
    }
}

Now my question is how do I remove the post object from the array? Example of the array:

[
    {
        id: 1,
        title: 'Test'
    },
    {
        id: 2,
        title: 'Test'
    },
    {
        id: 3,
        title: 'Test'
    },
]

So I want to remove the post with id 2 from the array, so angular can update my display table. How would I do this?

devnull69 · Accepted Answer · 2017-04-06 13:24:36Z

1

If post is an actual element of the array (and not a cloned copy or something), then you could just do

this.posts = this.posts.splice(this.posts.indexOf(post), 1);

answered Apr 6, 2017 at 13:24

devnull69

16.6k9 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mario Petrovic Over a year ago

You cannot find object inside array with indexOf. You can only use indexOf() if you are trying to find string in array or string in string

devnull69 Over a year ago

At least in Chrome it works. I am not entirely sure about all the other browsers out in the wild

Mario Petrovic Over a year ago

Take a look at this. plnkr.co/edit/Q8by0XrwCZFNAfbJBj9E?p=preview

devnull69 Over a year ago

This is not an example of an actual element of the array but rather you create a new object resembling one of the objects of the array (which is not the same object)

devnull69 Over a year ago

I won't ... why should I? I think you didn't get it

|

Mario Petrovic · Accepted Answer · 2017-04-07 20:58:10Z

1

You just need to loop through the list of posts and remove the one you want:

delete(post)
{
    this.http.post('/posts/delete'+ post.id)
         .subscribe(res =>
         {
              for(let p in this.posts) {
                   if(this.posts[p].id == post.id) {
                        this.posts.splice(p, 1);
                        break;
                   }
              }
         });
}

Or there is solution to use .filter():

delete(post)
{
    this.http.post('/posts/delete'+ post.id)
        .subscribe(res =>
         {

             this.posts = this.posts.filter(item => {
                  return item.id != post.id;
             })
        });
    }

edited Apr 7, 2017 at 20:58

answered Apr 6, 2017 at 13:21

Mario Petrovic

8,44516 gold badges45 silver badges66 bronze badges

Collectives™ on Stack Overflow

Remove model from array with angular

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related