AngularJS replace element in list via foreach

Question

I am trying to replace an element in a list by a new one (data). The list is in my scope as $scope.list.

So I do something like that :

angular.foreach($scope.list, function(element) {
    if(element.id === data.id) {
      element = data;
      console.log(element);
      return false;
});

console.log($scope.list);

In the console element is updated but $scope.list remains unchanged.

First I tried to use Array.find() instead of looping the list like this :

$scope.list.filter(x => x.id === data.id)[0] = data;

But I got an error in the console : Invalid left-hand side in assignment.

Do you know why it doesn't change the $scope.list ? I am quite new in AngularJS and JavaScript.

Thanking you in advance,

element=data is only changing a variable in memory. You need to change the value of the array element at the index where the id's match — charlietfl
– charlietfl, Commented Nov 17, 2018 at 20:58

baklazan · Accepted Answer · 2018-11-17 21:30:08Z

2

Try this

$scope.list = $scope.list.map(element => element.id === data.id ? data : element);

A map function is basically a forEach with return - map

Without arrow function and proper if

$scope.list = $scope.list.map(function(element){
  if (element.id === data.id){ 
    return data;
  } 

  return element;
});

edited Nov 17, 2018 at 21:30

answered Nov 17, 2018 at 20:59

baklazan

8196 silver badges13 bronze badges

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

2 Comments

Cybermate Over a year ago

Thank you for your answer. It works pretty good now ! I assume it's better to do this way or, as someone said above, to loop and then update the list at the correct index ?

baklazan Over a year ago

I think this is the best way as it is a functional programming way. I think for loops should be prohibited :D

georgeawg · Accepted Answer · 2018-11-17 21:19:28Z

0

Use the key and obj values exposed to the iterator function:

angular.forEach($scope.list, function(element,key,obj) {
    if(element.id === data.id) {
      obj[key] = data;
      console.log(obj);
      return false;
});

For more information, see AngularJS angular.forEach function API Reference.

answered Nov 17, 2018 at 21:19

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

AngularJS replace element in list via foreach

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related