selecting nested json with angular

Question

I have a select box that is populated with json. Here is the json...

{
"Connectivity": [

    {
        "product_id": 1,
        "product_name": "SmartLink",
        "product_price_attributes": [
            {
                "key": "postcodeA",
                "type": "text"
            },
            {
                "key": "BearerBW",
                "type": "text"

            },
            {
                "key": "Total bandwidth",
                "type": "text"
            }
        ]
    },
    {
        "product_id": 2,
        "product_name": "SmartNet",
        "product_price_attributes": [
            {
                "key": "postcodeA",
                "type": "text"
            },
            {
                "key": "BearerBW",
                "type": "text"
            }
        ]
    },
    {
        "product_id": 3,
        "product_name": "Centralised Internet",
        "product_price_attributes": [
            {
                "key": "BearerBW",
                "type": "text"
            }
        ]
    }

],
"Cloud Services": [
    {
        ...
    }
]
}

I use this code in the controller to populate the drop down

 $http.get('scripts/json/sample-products.json')
        .then(function(res){
            $scope.portfolio1 = res.data.Connectivity;
        });

This creates the select box like this

<select ng-model="selectedProduct" ng-options="opt as opt.product_name for opt in portfolio1" 
ng-change="getPriceAttributes()">
<option value="0" selected="selected" label="SmartLink">SmartLink</option>
<option value="1" label="SmartNet">SmartNet</option>
<option value="2" label="Centralised Internet">Centralised Internet</option>

When I pick an option from my select box getPriceAttributes() is fired. It looks like this...

 $scope.getPriceAttributes = function() {
        $http.get('scripts/json/sample-products.json')
            .then(function(res){
                $scope.formFields = res.data;
            });
    };

So my issue is that I don't know how I should drill down to get to the nested object 'product_price_attributes' for a selected product. I'm not sure what I need to pass to getPriceAttributes or what I need to change to the function to get it working.

Any ideas?

Many thanks

tymeJV · Accepted Answer · 2015-01-27 14:30:59Z

2

selectedProduct is set to be opt - which is each item in the Connectivity array, so simply:

console.log($scope.selectedProduct.product_price_attributes)

You can also pass in the model as a param to the change function:

$scope.getPriceAttributes = function(item) {
    console.log(item.product_price_attributes)
    ...
}

<select ng-model="selectedProduct" ng-options="opt as opt.product_name for opt in portfolio1" ng-change="getPriceAttributes(selectedProduct)">

answered Jan 27, 2015 at 14:30

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

selecting nested json with angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related