如何在多维数组/JSON中使用angular.forEach()遍历所有父级与子级文本

嘿，这个问题我碰到过好几次了！你现在的代码只能遍历第一层父级文本，是因为没处理数据里嵌套的items子数组——得用递归来搞定这种层级结构，不管嵌套多少层都能挖到所有的text内容。

完整修改方案 #

这里用AngularJS的angular.forEach实现递归遍历，完全适配你的数据结构：

const data = [ 
  { text: "Item 1" }, 
  { text: "Item 2", items: [ { text: "SubItem 2.1" }, { text: "SubItem 2.2" } ] }, 
  { text: "Item 3" } 
];

// 定义递归遍历函数，专门处理层级数组
function traverseAllText(itemArray) {
  angular.forEach(itemArray, function(value) {
    // 先输出当前节点的文本
    console.log(value.text);
    // 检查当前节点是否有子items数组，有的话递归遍历
    if (value.items && Array.isArray(value.items)) {
      traverseAllText(value.items);
    }
  });
}

// 调用函数开始遍历
traverseAllText(data);

代码解释 #

• 核心思路：写一个可重复调用的递归函数traverseAllText，它接收一个数组作为参数。
• 第一步：遍历传入数组的每个元素，先打印当前元素的text。
• 第二步：判断当前元素是否包含items子数组（要先确认items存在且是数组类型，避免报错），如果有，就把这个子数组传给traverseAllText，重复上面的遍历逻辑——这样就能逐层深入所有嵌套层级。

可选：用原生JS forEach实现 #

如果你更习惯原生JS写法，效果完全一样：

function traverseAllText(itemArray) {
  itemArray.forEach(function(value) {
    console.log(value.text);
    if (value.items && Array.isArray(value.items)) {
      traverseAllText(value.items);
    }
  });
}

运行这段代码后，控制台会依次输出：

Item 1
Item 2
SubItem 2.1
SubItem 2.2
Item 3

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