Как использовать angular.forEach () в многомерном массиве или JSON

Question

Мне нужно просмотреть каждый текст (родитель и потомки)

Пример кода JS:

data: [
        { text: "Item 1" },
        { text: "Item 2", items: [
          { text: "SubItem 2.1" },
          { text: "SubItem 2.2" }
        ] },
        { text: "Item 3" }
      ]
angular.forEach(data, function (value, key) 
{
  console.log(value.text);
});`

Этот код вернул только родительские тексты.

Answer 1

Вы должны использовать angular.isDefined, чтобы проверить, существует ли свойство items в каждом объекте data, а затем пройти через него, чтобы получить значение text в массиве items:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  var data= [
    { text: "Item 1" },
    { text: "Item 2", items: [
      { text: "SubItem 2.1" },
      { text: "SubItem 2.2" }
    ] },
    { text: "Item 3" }
  ];
angular.forEach(data, function (value, key) 
  {
    console.log(value.text);
    if(angular.isDefined(value.items)){
      var itemsArray = value.items;
      angular.forEach(itemsArray, function (item, key){
        console.log(item.text);
      });
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl"></div>

Answer 2

Это не сработало, потому что вы не зациклились на дочерних элементах.Смотрите код ниже:

angular.module('app', [])
  .controller('ctrl', function() {
    var printItems = function(items) {
      angular.forEach(items, function(value, key) {
        console.log(value.text);

        if (value.items) {
          printItems(value.items);
        }
      });
    };

    var data = [{
      text: "Item 1"
    }, {
      text: "Item 2",
      items: [{
        text: "SubItem 2.1"
      }, {
        text: "SubItem 2.2"
      }]
    }, {
      text: "Item 3"
    }];
    
    printItems(data);
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl"></div>

Извлекает логику в отдельную функцию и вызывает ее рекурсивно для обхода потомков.