Extract XML using Ajax and Bind data to SELECT dropdown list with AngularJS ng-options

We often use an HTML <select> dropdown list element to provide a list of items to our users, by adding each item to the list using the <option> attribute. You can use the <select> element with in an AngularJS app too. There are numerous ways to bind and populate data to a <select> element. AngularJS “ng-options” directive provides a faster way of binding dynamic or static data to the <select> element. Here, in this article I am going to show you how to extract XML data using Ajax and bind the data to the <options> attribute using ng-options and $scope.

See this demo

I have written many articles before, explaining different ways with examples on how to extract (or get) data from an XML document using either JavaScript or jQuery. I am providing a link to one of my previous article, as I am sure it will help you understand XML data usage on a web application.

The XML File

You can open library.xml file to view it. Copy the contents of the file and save it in your computer and name it as library.xml, because I am using the same file name for the demo here. You can change the name of the file according to your choice later.

The document has many elements. However, for the example I’ll use the BookName attribute to populate the books name inside the <option> attribute.

AngularJS View and Model

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <select ng-model="your_selection" ng-options="b for b in list">
            <option value="">-- Select a Book --</option>
        </select>

        <p>You have selected: {{ your_selection }}</p>
    </div>
</body>

In the view section, I have added the <select> element with two AngularJS directives that is, an ng-model with an ng-options. As you can see, I have hard coded a single <option> with an empty string. It will display the "Select a Book" value when the dropdown list is loaded.

The ng-model directive will display the selected option in the view. I have bound the model to the view using an AngularJS expression.

However, first we need to fill the dropdown list with some values (or data). The “ng-options” directive will provide that data to the option elements. Take a good look at this line, “b for b in list”. The “list” will have items (extract from the XML doc) and it will loop through each element and fill the dropdown list with these items. We will assign the values to the list in our controller section using the $scope object.

👉 How to extract Data from an XML file using JavaScript

The AngularJS Controller with the $scope

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

    myApp.controller('myController', function ($scope, $http) {

        var arrBooks = new Array();

        $http.get("../../library/library.xml").success(function (xml) {
            $(xml).find('List').each(function () {
                arrBooks.push($(this).find('BookName').text())
            });

            $scope.list = arrBooks;
        }).error(function (status) {
            alert(status);
        });
    });
</script>
</html>

Try it

If this your first encounter with AngularJS, then I recommend you look at this article to understand how to initialize and register an AngularJS application inside the controller.

In the above script, I have declared the $scope along with $http. In AngularJS the $http service provides necessary properties to call Ajax Services. The $http.get() method will make a request for the XML data. Once, it receives the XML, it loops through each node and fills the array with data, which it later delivers to the Angular model via $scope.

$scope.list = arrBooks;

Conclusion

AngularJS provides many useful directives, so we can design our Single Page Applications with ease. The “ng-options” is one of many directives that you would use in your applications many times, since it provides a faster way to bind and populate data to an HTML select dropdown list.

See this demo

← PreviousNext →