AngularJS Update Array Items by a Given Key

Question

I'm using AngularJS to create a site.

There's my array:

$scope.replyList = [
  {
    "id": "85485",
    "reply_content": "aaaaaaa",
    "reply_gender": "1",
    "reply_author": "John"
  },
  {
    "id": "85487",
    "reply_content": "bbbbbbb",
    "reply_gender": "1",
    "reply_author": "Ben"
  },
  {
    "id": "85504",
    "reply_content": "ccccccc",
    "reply_gender": "1",
    "reply_author": "Wang"
  }
]

What I want to do is update the item value by a given key id.

For example, I'd like to update the content with id 85485. How can you deal with that?

$scope.replyList[{id: 85475}].reply_content = 'dddddd'; /* failed */

Thank you very much.

Pranav C Balan · Accepted Answer · 2016-09-20 17:44:51Z

6

Use Array#find method to get the array element.

$scope.replyList.find(function(v) {
  return v.id == 85475;
}).reply_content = 'dddddd';

// or with ES6 arrow function 

$scope.replyList.find(v => v.id == 85475).reply_content = 'dddddd';

var replyList = [{
  "id": "85475",
  "reply_content": "aaaaaaa",
  "reply_gender": "1",
  "reply_author": "John"
}, {
  "id": "85487",
  "reply_content": "bbbbbbb",
  "reply_gender": "1",
  "reply_author": "Ben"
}, {
  "id": "85504",
  "reply_content": "ccccccc",
  "reply_gender": "1",
  "reply_author": "Wang"
}];

replyList.find(function(v) {
  return v.id == 85475;
}).reply_content = 'dddddd';

console.log(replyList);

For older browser check polyfill option of find method.

UPDATE : If you want to update all the element with that particular id then use Array#forEach method to iterate. Actually, there is no need of Array#find method since you just want to update the value.

$scope.replyList.forEach(function(v) {
   if(v.id == 85475) v.reply_content = 'dddddd';
});

var replyList = [{
  "id": "85475",
  "reply_content": "aaaaaaa",
  "reply_gender": "1",
  "reply_author": "John"
}, {
  "id": "85487",
  "reply_content": "bbbbbbb",
  "reply_gender": "1",
  "reply_author": "Ben"
}, {
  "id": "85504",
  "reply_content": "ccccccc",
  "reply_gender": "1",
  "reply_author": "Wang"
}];

replyList.forEach(function(v) {
  if (v.id == 85475) v.reply_content = 'dddddd';
});

console.log(replyList);

edited Sep 20, 2016 at 17:44

answered Sep 20, 2016 at 17:24

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

5 Comments

Benyi Over a year ago

Thank you so much! This code shows an error undefined is not an object. What is the question?

Pranav C Balan Over a year ago

@Benyi : there is no element with that id

Pranav C Balan Over a year ago

@Benyi : to avoid that keep a reference variable like : var obj = $scope.replyList.find(function(v) { return v.id == 85475; }); obj && obj.reply_content = 'dddddd';

Benyi Over a year ago

Thank you very much. I made a silly mistake. This works fine. It's helpful !

Pranav C Balan Over a year ago

@Benyi : glad to help

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-09-20 17:41:00Z

2

Use the .filter method of array and get the first position of the result

$scope.replyList.filter(function(item){
  return item.id === '85475';
})[0].reply_content = 'dddddd';

If exists more than one result with the given value of key, process them all using the .map method.

$scope.replyList
  .filter(function(item){
    return item.id === '85475';
  })
  .map(function(item){
     item.reply_content = 'ddddd'
     return item;
   });

Take advantage of the javascript functional approach!!

edited Sep 20, 2016 at 17:41

answered Sep 20, 2016 at 17:31

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

1 Comment

Benyi Over a year ago

Thank you very much. This code works fine with AngularJS!

ninjawarrior · Accepted Answer · 2016-09-20 17:36:23Z

0

Use a simple for loop to iterate over the array and find the object with the matching id and replace the content.This will work in all browsers.

function replace(array, id, content) {
    var len = array.length,
        i;

    for (i = 0; i < len; i++) {
        if (array[i].id === id) {
            array[i].reply_content = content;
        }
    }
};

replace($scope.replyList, '85485', 'replacedcontent');

answered Sep 20, 2016 at 17:36

ninjawarrior

3261 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS Update Array Items by a Given Key

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related