python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
foreach in knockout js and if condition in knockout js

foreach with if condition in knockout js

Hello everyone, I am going to share the code sample for how to use foreach loop and if condition in knockoutJs as given below.

Table of Contents

1. foreach loop in observable array knockout Js 
2. if in observable array knockout Js 
3. List in observable array knockout Js

This is for view code in Knockout Js for foreach loop and if conditions using knockoutjs MVC 4


<div data-bind="foreach: matters">
    <div data-bind="if: dateTime.length > 0">
        <table>
            <tr>
                <td>
                    <label data-bind="text: dateTime"></label>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="time_data">
    <table>
        <tr>
            <td>
                <img src="~/Images/icon_status.png" /></td>
            <td data-bind="foreach: subMatter">
                <div data-bind="text: $data"></div>
            </td>
            <td>
                <div data-bind="text: hour"></div>
                <a href="#">
                    <img src="~/Images/icon_options.png" />
                </a>
            </td>
        </tr>
    </table>
</div>

This is for viewModel code which use to display each row using foreach on matters collection [matters is a observable array]

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: "/MyTimeHome/GetMethod/",
            type: 'post',
            data: "{'matterId':'1' }",
            contentType: 'application/json',
            success: function (result) {
                // call to view model              
                getViewModel(result);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                var errorMessage = '';
                $('#message').html(jqXHR.responseText);
            }
        });

        function getViewModel(result) {
            // Define a "matter" class.
            var matter = function (dateTime, hour, subMatter) {
                this.dateTime = dateTime;
                this.hour = hour;
                this.subMatter = ko.observableArray(subMatter);
            }
         
            var viewModel = {
                matters: [],
                showRenderTimes: ko.observable(false)
            };

            // push all data in view model
            for (var i = 0; i < result.length; i++) {
                var matterRow = new matter(result[i].createdOn + " | " + result[i].totalHours, result[i].totalHours,
                    [result[i].matterTitle, result[i].MyProperty1, result[i].matterComment]);

                viewModel.matters.push(matterRow);
               
            }
            // bind view model to knockout
            ko.applyBindings(viewModel);
        } 
    });

</script>



ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions