AngularJS 通过给定键更新数组项答案

【问题标题】：AngularJS Update Array Items by a Given KeyAngularJS 通过给定键更新数组项
【发布时间】：2016-09-20 17:22:50
【问题描述】：

我正在使用 AngularJS 创建网站。

这是我的数组：

$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"
  }
]

我想要做的是通过给定键id 更新项目值。

例如，我想更新 ID 为 85485 的内容。怎么办？

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

非常感谢。

【问题讨论】：

标签： javascript angularjs arrays

【解决方案1】：

使用Array#find方法获取数组元素。

$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);

对于旧版浏览器check polyfill option of find method。

更新：如果您想使用特定的id 更新所有元素，请使用 Array#forEach 方法进行迭代。实际上，不需要 Array#find 方法，因为您只是想更新值。

$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);

【讨论】：

非常感谢！此代码显示错误undefined is not an object。问题是什么？
@Benyi : 没有具有该 id 的元素
@Benyi：为避免保留引用变量，例如：var obj = $scope.replyList.find(function(v) { return v.id == 85475; }); obj && obj.reply_content = 'dddddd';
非常感谢。我犯了一个愚蠢的错误。这工作正常。很有帮助！
@Benyi : 很高兴为您提供帮助

【解决方案2】：

使用数组的.filter方法，获取结果的第一个位置

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

如果存在多个给定key值的结果，则使用.map方法处理它们。

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

利用 javascript 函数式方法！！

【讨论】：

非常感谢。此代码适用于 AngularJS！

【解决方案3】：

使用简单的 for 循环遍历数组并找到具有匹配 id 的对象并替换内容。这将适用于所有浏览器。

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');

【讨论】：