在ng-repeat中显示嵌套的json

Question

I seem to be having difficulty in grasping how to drill down to get to nested JSON and display it on a page using angular. For example I have the following JSON structure and I want to display the connectivity products under portfolio in an ng-repeat...

{
"addons": [
    ...
],

"attributes": [     
    ...
],
"portfolios": [
    {
        "connectivity": [
            {
                "product-1": {
                    "label": "product-1",
                    "description": "Description in here"
                }
            },
            {
                "product-2": {
                    "label": "product-2",
                    "description": "Description in here"
                }
            }
        ]

    }
]

}

So far I have tried it two different ways.

$scope.listOfProducts = allProducts.data.portfolios.connectivity;

and in the ng-repeat

ng-repeat='product in listOfProducts.portfolios.connectivity'

What would be the correct way to loop through and display the 'connectivity' products in a ng-repeat? Thanks

EDIT:

I've changed the JSON to this structure...

{
"addons": [
...
],

"attributes": [     
    ...
],
"portfolios": [
{
    "connectivity": [
        {
                "label": "product-1",
                "description": "Description in here"
        },
        {
                "label": "product-2",
                "description": "Description in here"
        }
    ]

}
]

But I still can't seem to get ng-repeat to display the products in connectivity.

$scope.listOfProducts = allProducts.data.portfolios.connectivity

Answer 1

Since listOfProducts is already set to the connectivity array, you would just ng-repeat="product in listOfProducts"

<div ng-repeat="product in listOfProducts">
  {{product.label}}
</div>

Edit: Well, your array is sort of irregular, since you're creating a property called product-[index] for each item. Do you have control of the data which is returned? Your array should just have the objects, like:

"connectivity": [
    {
        "label": "product-1",
        "description": "Description in here"
    },
    {
        "label": "product-2",
        "description": "Description in here"
    }
]