Search code examples
javascripthtmlng-options

ng-options loop through an array of objects within an object?


I have this object format

{
      first_name : "Bob",
      last_name : "Smith",
      addresses : [
        {address:"1 Baker Street",
          city: "london"
        },
        {address:"2 Baker Street",
          city: "london"
        }
        ]
    }

I want to set the address bits in the select dropdown i.e. "1 Baker Street", "2 Baker Street",

This is my code

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedAddress" ng-options="item for item in testObject">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.testObject =     {
          first_name : "Bob",
          last_name : "Smith",
          addresses : [
            {address:"1 Baker Street",
              city: "london"
            },
            {address:"2 Baker Street",
              city: "london"
            }
            ]
        }
});
</script>

</body>
</html>

I'm struggling to get my head around how to loop through the objects with AngularJS. Any help?


Solution

  • You have to call the child object of array and the property. Take a look this code.

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.testObject =     {
              first_name : "Bob",
              last_name : "Smith",
              addresses : [
                {address:"1 Baker Street",
                  city: "london"
                },
                {address:"2 Baker Street",
                  city: "london"
                }
                ]
            }
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    
    <select ng-model="selectedAddress" ng-options="item.address for item in testObject.addresses">
    </select>
    
    </div>