<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Webling Membergroup List Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script>

        /**
         * Add a key for your webling REST API.
         * https://demo.webling.ch/api/
         */
		var apikey = "<yourapikey>";

        /**
         * The domain of your webling account
         */
		var domain = "https://<yourdomain>.webling.ch";

		// when the document is ready start to call the api
		$(document).ready(function(){

            // fetch the list of all ids of accessible member groups
            // https://demo.webling.ch/api/#membergroup-membergroup-list-get
			$.ajax(domain + "/api/1/membergroup?apikey=" + apikey).then(
                function(groups) {

				    // loop over the membergroups and display the titles and its ids
				    groups.objects.forEach(function(groupId) {

                        // add a list entry for each group to preserve the original order
                        $('#list').append('<li class="list-group-item" id="el' + groupId + '">…</li>');

						// fetch the data of the membergroup with the groupId
						// https://demo.webling.ch/api/#membergroup-membergroup-get
						$.ajax(domain + "/api/1/membergroup/" + groupId + "?apikey=" + apikey).then(
						    function(group){

							    // display the title of the group and its id as badg
								$('#el' + groupId).html(
								    '<span class="pull-right">id: ' + groupId + '</span>' + group.properties.title
								)
							},

                            // if an error occurs, show it on the console
                            function(jqXHR, textStatus, errorThrown) {
                                console.error(jqXHR, textStatus, errorThrown);
                            }
                        );
                    });
				},

				// if an error occurs, show it on the console
                function(jqXHR, textStatus, errorThrown) {
                    console.error(jqXHR, textStatus, errorThrown);
                }
            );
		})
	</script>
</head>
<body>
	<div class="container">
		<h1>Membergroups</h1>
		<ul id="list" class="list-group"></ul>
	</div>
</body>
</html>

Add example of how to retreive a list of all membergroups
Add example of how to retreive a list of all membergroups
