Angularjs create table with add/delete row, from ng-repeat in object of objects

Question

I have list of objects that go with ng-repeat to create a table:

  $scope.fieldData.gridDetails =
   {"1": {
    "Name" : "Test A",
    "Country" : "Germany",
    "City" : "Berlin"
  }, "2": {
    "Name" : "Test B",
    "Country" : "USA",
    "City" : "Chicago"
  }, "3": {
    "Name" : "Test C",
    "Country" : "France",
    "City" : "Paris"
  }, "4": {
    "Name" : "Test D",
    "Country" : "USA",
    "City" : "New York"
  }
  }
});

I want to make a code to remove object, like if I deleted "3": { "Name": "Test C" ... I want it should be:

  $scope.fieldData.gridDetails =
  {"1": {
    "Name" : "Test A",
    "Country" : "Germany",
    "City" : "Berlin"
  }, "2": {
    "Name" : "Test B",
    "Country" : "USA",
    "City" : "Chicago"
  }, "3": {
    "Name" : "Test D",
    "Country" : "USA",
    "City" : "New York"
  }
  }
});

I made this code but its not working:

  $scope.removeItem = function(index){ 
    $scope.fieldData.gridDetails[index] = undefined;
  }

but my code keep it :

  $scope.fieldData.gridDetails =
  {"1": {
    "Name" : "Test A",
    "Country" : "Germany",
    "City" : "Berlin"
  }, "2": {
    "Name" : "Test B",
    "Country" : "USA",
    "City" : "Chicago"
  }, "4": {
    "Name" : "Test D",
    "Country" : "USA",
    "City" : "New York"
  }
  }
});

Check this out! https://stackoverflow.com/a/15454424/2079271 — Gowthaman, Apr 23 '18 at 00:20
Possible duplicate of [How do I delete an item or object from an array using ng-click?](https://stackoverflow.com/questions/15453979/how-do-i-delete-an-item-or-object-from-an-array-using-ng-click) — Vikasdeep Singh, Apr 23 '18 at 01:37
I tried it, and it show an error message in the console: TypeError: $scope.fieldData.gridDetails.splice is not a function — user1994739, Apr 23 '18 at 07:58

score 0 · Answer 1 · answered Apr 23 '18 at 01:35

0

$scope.removeItem = function(index){ 
    $scope.fieldData.gridDetails.splice(index, 1);
}

Try that.

answered Apr 23 '18 at 01:35

Simon Poole

493
1
6
15

I tried it, and it show an error message: TypeError: $scope.fieldData.gridDetails.splice is not a function – user1994739 Apr 23 '18 at 07:55

score 0 · Answer 2 · answered Apr 23 '18 at 10:11

Try declaring your $scope.fieldData.gridDetails object as an array like below.

$scope.fieldData.gridDetails =
  [
  {
    "1": {
      "Name": "Test A",
      "Country": "Germany",
      "City": "Berlin"
    }
  },
  {
    "2": {
      "Name": "Test B",
      "Country": "USA",
      "City": "Chicago"
    }
  },
  {
    "3": {
      "Name": "Test C",
      "Country": "France",
      "City": "Paris"
    }
  },
  {
    "4": {
      "Name": "Test D",
      "Country": "USA",
      "City": "New York"
    }
  }
];

then create a function for removing the objects

$scope.removeItem = function(index){
    $scope.fieldData.gridDetails.splice(index,1);
}

score 0 · Answer 3 · answered May 28 '18 at 21:50

To convert the awkward structure to an array:

var x = $scope.fieldData.gridDetails;
var y = Object.keys(x).map(k => x[k]);

Use the form to slice and push the array;

To convert the array back to the awkward structure:

var z = y.reduce((a,x,i) => (a[i+1]=x), {});

For more information, see

Angularjs create table with add/delete row, from ng-repeat in object of objects

3 Answers3

Linked