如何基于条件移除嵌套对象数组元素？AngularJS/jQuery实现遇阻

嘿，我看了你遇到的问题——想在AngularJS或者jQuery里，基于特定条件从嵌套的JSON结构中移除对应的对象，但当前代码输出不符合预期。咱们一步步来搞定这个事儿。

首先，先明确核心需求：从responseData.data里每个元素的machine1数组中，移除满足特定条件（比如status为delivered？）的对象。常见的问题点要么是遍历数组时修改原数组导致索引错位，要么是条件判断逻辑没写对。

方案一：AngularJS原生方法（推荐） #

方法1：使用Array.filter()创建新数组

这个方法最简洁，而且不会直接修改原数组的结构，能完美避免遍历过程中的索引错位问题：

angular.module('ui.bootstrap.demo').controller('DataCtrl', function ($scope) {
  $scope.responseData = { 
    "data": [{ 
      "name": "Machine", 
      "quantity": 20, 
      "snVal": 22, 
      "machine1": [{ 
        "id": 2009, 
        "machineName": "ASD1", 
        "trackID": "34219", 
        "status": "delivered" 
      }, { 
        "id": 27893, 
        "machineName": "PX123", 
        "trackID": "98765", 
        "status": "pending" 
      }]
    }]
  };

  // 遍历外层data数组，过滤每个item的machine1
  angular.forEach($scope.responseData.data, function(item) {
    // 只保留status不等于delivered的机器对象
    item.machine1 = item.machine1.filter(function(machine) {
      return machine.status !== 'delivered';
    });
  });
});

方法2：倒序遍历+splice修改原数组

如果你需要直接修改原数组，记得一定要倒序遍历，这样移除元素后不会导致后续元素的索引错位：

angular.module('ui.bootstrap.demo').controller('DataCtrl', function ($scope) {
  $scope.responseData = { 
    "data": [{ 
      "name": "Machine", 
      "quantity": 20, 
      "snVal": 22, 
      "machine1": [{ 
        "id": 2009, 
        "machineName": "ASD1", 
        "trackID": "34219", 
        "status": "delivered" 
      }, { 
        "id": 27893, 
        "machineName": "PX123", 
        "trackID": "98765", 
        "status": "pending" 
      }]
    }]
  };

  angular.forEach($scope.responseData.data, function(item) {
    // 从数组末尾开始遍历，避免splice导致索引错位
    for (let i = item.machine1.length - 1; i >= 0; i--) {
      if (item.machine1[i].status === 'delivered') {
        // 移除当前索引的元素
        item.machine1.splice(i, 1);
      }
    }
  });
});

方案二：jQuery方法（使用$.grep） #

如果你更习惯用jQuery，$.grep可以帮你快速过滤数组，实现需求：

angular.module('ui.bootstrap.demo').controller('DataCtrl', function ($scope) {
  $scope.responseData = { 
    "data": [{ 
      "name": "Machine", 
      "quantity": 20, 
      "snVal": 22, 
      "machine1": [{ 
        "id": 2009, 
        "machineName": "ASD1", 
        "trackID": "34219", 
        "status": "delivered" 
      }, { 
        "id": 27893, 
        "machineName": "PX123", 
        "trackID": "98765", 
        "status": "pending" 
      }]
    }]
  };

  angular.forEach($scope.responseData.data, function(item) {
    // 过滤掉status为delivered的元素
    item.machine1 = $.grep(item.machine1, function(machine) {
      return machine.status !== 'delivered';
    });
  });
});

额外提醒 #

• 记得根据你的实际需求修改条件判断（比如如果不是status === 'delivered'，换成你需要的逻辑）；
• 为了避免报错，最好先判断item.machine1是否存在且是数组：if (item.machine1 && Array.isArray(item.machine1))再执行过滤操作；
• filter和$.grep都会返回新数组，不会修改原数组，而splice会直接修改原数组，根据你的场景选择合适的方式。

内容的提问来源于stack exchange，提问作者nan