Foreach test

For each testing

by Joy George Kunjikkuru

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<div ng-app="myApp">
    <div ng-controller="ChatCtrl">Looping JSON object Demo
        <br/>
        <button ng-click="loopStringsUsingFor()">01 Loop strings using for(;;)</button>
        <button ng-click="loopStringsUsingForIn()">02 Loop strings using for(in)</button>
        <button ng-click="loopStringsUsingForOf()">03 Loop strings using for of</button>
        <button ng-click="loopStringsUsingArrayForEach()">04 Loop strings using array.forEach</button>
        <button ng-click="loopStringsUsingObjectKeysForEach()">05 Loop strings using Object.keys(array).forEach</button>
        <button ng-click="loopStringsUsingMap()">06 Loop strings using Array.map()</button>
        <button ng-click="loopStringsUsingArrayFilter()">07 Loop strings using Array.filter()</button>
        <button ng-click="loopStringsUsingArrayEvery()">08 Loop strings using Array.every()</button>
        <button ng-click="loopStringsUsingArrayPop()">Loop strings using Array.Pop</button>
        <button ng-click="loopStringsUsingAngularForEach()">Loop string using angular.forEach(array,function())</button>
        <br/>
        <br/>
        <button ng-click="loopPersonsUsingFor()">Loop persons using for()</button>
        <button ng-click="loopTwicePersonsUsingForIn()">Loop twice persons using for(in) to show key name</button>
        <hr/>Accordian to load from collection.
        <accordion close-others="true">
            <accordion-group ng-repeat="message in messages" heading="{{message.from}}">{{message.msg}}</accordion-group>
        </accordion>
    </div>
</div>

CSS

#inner {
    background-color:red;
}

JavaScript

var strings = ["Joy", "George"];
var names = [{
    "name": "Joy",
}, {
    "name": "George"
}];
var persons = [{
    name: "Joy",
    address: "US"
}, {
    name: "George",
    address: "India"
}];

var myApp = angular.module("myApp", ['ui.bootstrap']);
myApp.controller('ChatCtrl', function ($scope) {
    $scope.loopStringsUsingFor = function () {
        for (i = 0; i < strings.length; i++) {
            output("i=" + i + " and string[i]=" + strings[i]);
        }
    };
    $scope.loopStringsUsingForIn = function () {
        for (s in strings) {
            alert(strings[s]);
        }
    };
    $scope.loopStringsUsingForOf = function () {
        for (s of strings) {
            output("s=" + s);
        }
    };
    $scope.loopStringsUsingArrayForEach = function () {
        strings.forEach(function (element, index) {
            output("index=" + index + ",element=" + element);
        });
    };
    $scope.loopStringsUsingObjectKeysForEach = function () {
        Object.keys(strings).forEach(function (element, index) {
            output("index=" + index + ",element=" + element + ",strings[element]=" + strings[element] + ",strings[index]=" + strings[element]);
        });
    };
    $scope.loopStringsUsingMap = function () {
        strings.map(function (s) {
            output("s=" + s);
        });
    }
    $scope.loopStringsUsingArrayFilter = function () {
        strings.filter(function (element) {
            output("s=" + element);
        });
        //if ($scope.messages.length > maxMessages) $scope.messages.splice(0, 1);
        //$scope.message = "";
    };
    $scope.loopStringsUsingArrayEvery = function () {
        strings.every(function (element, index) {
            output("element=" + element + ", index ="+index);
            return true;
        });
    }
    $scope.loopStringsUsingArrayPop = function () {
        while (s = strings.pop()) {
            output("s=" + s);
        }
        output("length of strings=" + strings.length);
 ...