for loop funtion call in collection - Shared with Office Add-in Playground

for loop funtion call in collection (Office Add-in Playground).json

{
    "name": "for loop funtion call in collection",
    "playgroundVersion": 1
}

app.js

// This is a compiled version of the TypeScript/JavaScript code ("app.ts").
// In case the original code was already JavaScript, this is likely identical to "app.js".

$("#button1").click(tableCase);
$("#button2").click(tableCaseWithTimer);
function tableCase() {
    Word.run(function (context) {
        var tables = context.document.body.tables;
        tables.load("items");
        return context.sync().then(function () {
            return formatNestedTable(tables, function (table) {
                table.getBorder(Word.BorderLocation.all).type = "none";
                var rows = table.rows;
                rows.load();
                return context.sync().then(function () {
                    rows.items[0].font.color = 'red';
                    var cells = rows.items[0].cells;
                    cells.load();
                    return context.sync().then(function () {
                        cells.items[0].horizontalAlignment = "centered";
                        return context.sync().then().catch(function (error) {
                            handleError(error);
                        });
                    });
                });
            });
        });
    }).catch(function (error) {
        showNotification('Error: ', error.message);
    });
}
function tableCaseWithTimer() {
    Word.run(function (ctx) {
        var tables = ctx.document.body.tables;
        tables.load("items");
        return ctx.sync().then(function () {
            return formatNestedTable(tables, function (table) {
                table.getBorder(Word.BorderLocation.all).type = "none";
                var rows = table.rows;
                rows.load();
                return ctx.sync().then(function () {
                    rows.items[0].font.color = 'red';
                    var cells = rows.items[0].cells;
                    cells.load();
                    return ctx.sync().then(function () {
                        cells.items[0].horizontalAlignment = "centered";
                        return createTimerPromise(2000).then(ctx.sync).catch(function (error) {
                            handleError(error);
                        });
                    });
                });
            });
        });
    }).catch(function (error) {
        showNotification('Error: ', error.message);
    });
}
function createTimerPromise(milliseconds) {
    return new OfficeExtension.Promise(function (resolve) {
        setTimeout(resolve, milliseconds);
    });
}
function formatNestedTable(tables, handler) {
    var promise = new OfficeExtension.Promise(function (resolve) { resolve(); });
    tables.items.forEach(function (item) {
        promise = promise.then(function () {
            return handler(item);
        });
    });
    return promise;
}
;
function handleError(error) {
    showNotification("Error", error);
    // Log additional information to the console, if applicable:
    if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
}
function showNotification(header, text) {
    var container = document.getElementById('notification-popup');
    var headerPlaceholder = container.querySelector('.notification-popup-title');
    var textPlaceholder = container.querySelector('.ms-MessageBanner-clipper');
    headerPlaceholder.textContent = header;
    textPlaceholder.textContent = text;
    var closeButton = container.querySelector('.ms-MessageBanner-close');
    closeButton.addEventListener("click", function () {
        if (container.className.indexOf("hide") === -1) {
            container.className = "ms-MessageBanner is-hidden";
        }
        closeButton.removeEventListener("click", null);
    });
    container.className = "ms-MessageBanner is-expanded";
}

app.ts

$("#button1").click(tableCase);
$("#button2").click(tableCaseWithTimer);

function tableCase() {
    Word.run(function (context) {
        var tables = context.document.body.tables;
        tables.load("items");
        return context.sync().then(function () {
            return formatNestedTable(tables, function (table) {
                table.getBorder(Word.BorderLocation.all).type = "none";
                var rows = table.rows;
                rows.load();
                return context.sync().then(function () {
                    rows.items[0].font.color = 'red';
                    var cells = rows.items[0].cells;
                    cells.load();
                    return context.sync().then(function () {
                        cells.items[0].horizontalAlignment = "centered";
                        return context.sync().then().catch(function (error) {
                            handleError(error);
                        });
                    });
                });
            });
        });
    }).catch(function (error) {
        showNotification('Error: ', error.message)
    });
}

function tableCaseWithTimer() {
    Word.run(function (ctx) {
        var tables = ctx.document.body.tables;
        tables.load("items");
        return ctx.sync().then(function () {
            return formatNestedTable(tables, function (table) {
                table.getBorder(Word.BorderLocation.all).type = "none";
                var rows = table.rows;
                rows.load();
                return ctx.sync().then(function () {
                    rows.items[0].font.color = 'red';
                    var cells = rows.items[0].cells;
                    cells.load();
                    return ctx.sync().then(function () {
                        cells.items[0].horizontalAlignment = "centered";
                        return createTimerPromise(2000).then(ctx.sync).catch(function (error) {
                            handleError(error);
                        });
                    });
                });
            });
        });
    }).catch(function (error) {
        showNotification('Error: ', error.message)
    });
}

function createTimerPromise(milliseconds) {
    return new OfficeExtension.Promise(function (resolve) {
        setTimeout(resolve, milliseconds);
    })
}

function formatNestedTable(tables, handler) {
    var promise = new OfficeExtension.Promise(function (resolve) { resolve(); });
    tables.items.forEach(function (item) {
        promise = promise.then(function () {
            return handler(item);
        })
    });

    return promise;
};

function handleError(error) {
    showNotification("Error", error);
    // Log additional information to the console, if applicable:
    if (error instanceof OfficeExtension.Error) {
        console.log("Debug info: " + JSON.stringify(error.debugInfo));
    }
}

function showNotification(header, text) {
    var container = document.getElementById('notification-popup');
    var headerPlaceholder = container.querySelector('.notification-popup-title');
    var textPlaceholder = container.querySelector('.ms-MessageBanner-clipper');

    headerPlaceholder.textContent = header;
    textPlaceholder.textContent = text;

    var closeButton = container.querySelector('.ms-MessageBanner-close');
    closeButton.addEventListener("click", function () {
        if (container.className.indexOf("hide") === -1) {
            container.className = "ms-MessageBanner is-hidden";
        }
        closeButton.removeEventListener("click", null);
    });

    container.className = "ms-MessageBanner is-expanded";
}

index.html

<div id="content-main" class="ms-font-m">
    <h1 class="ms-font-xl">Sample snippet</h1>
    <p>This sample will color the selected range in yellow, and also display the selection address in a notification pane.</p>
    <button id="button1" class="ms-Button ms-Button--primary">
        <span class="ms-Button-label">ForEach Table Collection</span>
    </button><p></p>
    <button id="button2" class="ms-Button ms-Button--primary">
        <span class="ms-Button-label">ForEach Table Collection with Timer</span>
    </button>
</div>

<div id="notification-popup" class="ms-MessageBanner is-hidden">
    <div class="notification-popup-title ms-fontSize-l ms-fontWeight-semibold"></div>
    <div class="ms-MessageBanner-content">
        <div class="ms-MessageBanner-text">
            <div class="ms-MessageBanner-clipper"></div>
        </div>
    </div>
    <button class="ms-MessageBanner-close">
        <i class="ms-Icon ms-Icon--x"></i>
    </button>
</div>

libraries.txt

# Office.js CDN reference
//appsforoffice.microsoft.com/lib/1/hosted/Office.js

# NPM CDN references
jquery
office-ui-fabric/dist/js/jquery.fabric.min.js
office-ui-fabric/dist/css/fabric.min.css
office-ui-fabric/dist/css/fabric.components.min.css

# IntelliSense definitions
//raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/office-js/office-js.d.ts
//raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/jquery/jquery.d.ts

style.css

/* Notification pane customizations, including overwriting some Fabric UI defaults */

#notification-popup .notification-popup-title {
    text-align: left;
    margin: 15px 50px 0 15px;
}

#notification-popup.ms-MessageBanner {
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: left;
    height: inherit;
}

#notification-popup.ms-MessageBanner, #notification-popup .ms-MessageBanner-text {
    min-width: inherit;
}
#notification-popup .ms-MessageBanner-text {
    margin: 0;
    padding: 18px 15px;
}


/* Other styling */

#content-main {
    padding: 10px;
}
#sample-button {
    margin-top: 10px;
}