AngularJS nested objects in the same bootstrap row-CodePudding

i have a JSON object

{
  "products": [
    {
      "devices": [
        {
          "label": "P1D1"
        },
        {
          "label": "P1D2"
        }
      ]
    },
    {
      "devices": [
        {
          "label": "P2D1"
        },
        {
          "label": "P2D2"
        }
      ]
    }
  ]
}

and i want to have in HTML something like this

<div >
    <div >
        P1D1
    </div>
    <div >
        P1D2
    </div>
    <div >
        P2D1
    </div>
    <div >
        P2D2
    </div>
</div>

AngularJS is the language i am using, but i don't seem the find the right syntax

<div >
    <div ng-repeat="product in obj.products">
        <div  ng-repeat="device in product.devices">
            {{device.label}}
        </div>
    </div>
</div>

How can i achieve all the subitems to be displayed in a bootstrap column next to eachother?

CodePudding user response：

I think you can't do it directly using only HTML. Alternatively you can use some manipulation in Javascript to flatten your data.

JAVASCRIPT

$scope.getItems = function(){
  return $scope.obj.products.flatMap(function(element){
    return element.devices;
  }) 
}

HTML

<div  ng-repeat="device in getItems()">
  {{device.label}}
</div>

Check my example: https://codepen.io/avgustint/pen/XWYyoyd?editors=1111