Home/ Questions/Q 9168475
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T15:38:03+00:00

I have web application where I’m trying to populate my html table using knockout.js

  • 0

I have web application where I’m trying to populate my html table using knockout.js but my table is still empty. My data is being called via ajax. jQuery and Knockout.js were all referenced to my page. Here’s the code;

HTML

 <table id="payment_schedule">
            <thead>
                <tr class="tableHeader">
                    <th width="50px">
                        Index
                    </th>
                    <th width="50px">
                        Due Date
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr data-bind="foreach: paymentSchedules">
                    <td data-bind="text: Index"></td>
                    <td data-bind="text: Month"></td>
                </tr>
            </tbody>
        </table>

JavaScript functions

 function GetComputation() {
        $.ajax({
        url: '/UnitSearch/CalculateMortgage',
        cache: false,
        dataType: 'json',
        success: function (data) {
                viewModel.paymentSchedules(data.PaymentSchedules);
        }
    });
}
var data = [];
var viewModel = {
    paymentSchedules: ko.observableArray(data)
};
ko.applyBindings(viewModel);

data returned from ajax

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code should work fine. You haven’t shown where you are calling the GetComputation function but here’s a full working example.

    Controllers:

    public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

public class UnitSearchController : Controller
{
    public ActionResult CalculateMortgage()
    {
        var data = new 
        {
            PaymentSchedules = new[] 
            {
                new { Index = "Reservation Fee", Month = "23-Jan-13" },
                new { Index = "Reservation Fee", Month = "25-Jan-13" },
            }
        };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}

    Index view (~/Views/Home/Index.cshtml):

    @{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <table id="payment_schedule">
        <thead>
            <tr class="tableHeader">
                <th>Index</th>
                <th>Due Date</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: paymentSchedules">
            <tr>
                <td data-bind="text: Index"></td>
                <td data-bind="text: Month"></td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.7.1.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/scripts/knockout-2.1.0.js")"></script>
    <script type="text/javascript">
        var data = [];
        var viewModel = {
            paymentSchedules: ko.observableArray(data)
        };
        ko.applyBindings(viewModel);

        function GetComputation() {
            $.ajax({
                url: '/UnitSearch/CalculateMortgage',
                cache: false,
                success: function (data) {
                    viewModel.paymentSchedules(data.PaymentSchedules);
                }
            });
        }

        // I am calling the GetComputation function immediately in this example
        // to populate the table with data but you could call it whenever you want
        GetComputation();
    </script>
</body>
</html>

    In this example I am calling the GetComputation immediately but you could adapt the code and invoke it whenever you want. Also notice that I have applied the data-bind="foreach: paymentSchedules" on the <tbody> and not the <tr> element.

    • 0