Remove a just created object on AngularJs

Question

I have a list of searches.

search.html:

<ul class="col-xs-12" ng-repeat="search in searchesCtrl.searches">
    <li>
      <a href="#">{{search.url}}</a><button class="btn btn-danger" ng-click="searchesCtrl.deleteSearch(search)">Delete</button>
    </li>
</ul>

<div class="input-group">
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.name"/>
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.url"/>
    <span class="input-group-btn">
         <a class="btn btn-primary" ng-click="searchesCtrl.addNewSearch()">Go</a>
    </span>
</div>

search.controller.js:

'use strict';

(function () {

class SearchesComponent {
  constructor($http) {
     this.$http = $http;
     this.searches = [];
  }

  $onInit() {
    this.$http.get('/api/searches')
      .then(response => {
        this.searches = response.data;
      });
  }

  addNewSearch() {
    if (this.newSearch) {
      this.$http.post('/api/searches', {
        url: this.newSearch.url,
        name: this.newSearch.name
      }).then(() => {
        this.searches.push(this.newSearch);
        this.newSearch = '';
      });
    }
  }

  deleteSearch(search) {
    this.$http.delete('/api/searches/' + search._id)
      .then(() => {
        this.searches.splice(this.searches.indexOf(search),1);
      });
  }
}

angular.module('myApp')
  .component('searches', {
    templateUrl: 'app/searches/searches.html',
    controller: SearchesComponent,
    controllerAs: 'searchesCtrl'
  });
})();

If I try to remove a search that I just have added, without refreshing the page, it's not working.
The ng-click="searchesCtrl.deleteSearch(search)" is calling /api/searches/undefined.

I try to work without the $index solution. Is it possible ?

In which part of your function are you getting undefined? — developer033
– developer033, Commented Jul 24, 2016 at 17:26
the object parameter "search._id" is undefined because it just have been created. — Julien Malige
– Julien Malige, Commented Jul 24, 2016 at 17:30
Does your server return newly created objects on $http.post('/api/searches'..).then(newSearch => ...? You need to get search._id from the server somehow. — Yury Tarabanko
– Yury Tarabanko, Commented Jul 24, 2016 at 17:31
Yes, you have to get this id after $http.post in your addNewSearch function, otherwise your delete willn't work. — developer033
– developer033, Commented Jul 24, 2016 at 17:32
@YuryTarabanko & developer033 I have that in my my answer.. but have deleted it because I was little bit confused with OP. Now by looking at comments I confirmed that my thought was right. So added my answer back. :) — Pankaj Parkar
– Pankaj Parkar, Commented Jul 24, 2016 at 17:34

Julien Malige · Accepted Answer · 2016-07-24 20:11:49Z

3

Because the newly added search doesn't seems to have _id parameter, as you are directly pushing only this.newSearch in searches array.

Basically your add new post method should return a object entity which has saved in Database & that will have correct _id populated by server. Next, push that new entity object to searches array. Still I personally feel this approach very bad, as we are assuming that only one user going to handle this system. As we're giving responsibility to update searches object in javascript only.

Here we go, rather than maintaining thing locally, I'd say that, you should re-run get call to fetch all searches which you're already doing $onInit function. So it will make ensure that the list you are seeing on UI is synced with server. You must call getSearches method when you are deleting and saving object which is proper way of doing it.

Code

class SearchesComponent {
  constructor($http) {
     this.$http = $http;
     this.searches = [];
  }

  getSearches(){
    this.$http.get('/api/searches')
      .then(response => {
        this.searches = response.data;
      });
  }

  $onInit() {
    this.getSearches(); //retrieving list of searches from server
  }

  addNewSearch() {
    if (this.newSearch) {
      this.$http.post('/api/searches', {
        url: this.newSearch.url,
        name: this.newSearch.name
      }).then(() => {
        this.getSearches(); //asking for list from server
      });
    }
  }

  deleteSearch(search) {
    this.$http.delete('/api/searches/' + search._id)
      .then(() => {
        this.getSearches(); //asking for list from server.
      });
  }
}

edited Jul 24, 2016 at 20:11

Julien Malige

3,5452 gold badges23 silver badges40 bronze badges

answered Jul 24, 2016 at 17:18

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Pankaj Parkar Over a year ago

@JulienMalige look at the updated code.. I changed my approach slightly, previous wasn't proper per me.. please check the code as well and follow those steps, Thanks :)

Julien Malige Over a year ago

thanks for the code. "Still I personally feel this approach very bad", what is your alternative solution ? A refresh ?

Pankaj Parkar Over a year ago

@JulienMalige yes, you should refresh searches, sorry for confusion, I had that in my answer, now I did format it again.. Thanks :)

Julien Malige Over a year ago

No problem, this is for me the good way to do what I want. I am using the yo angular-fullstack generator and some tutorials. Codes are not using the same practices, someones contain bugs...

Collectives™ on Stack Overflow

Remove a just created object on AngularJs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related