I have successfully integrated an API in knockout.js, but I am facing an issue with displaying the amount based on accounting principles. My table definition includes columns for id, name, debit, credit, and amount. Since not all amounts fall under debit or credit simultaneously, I need help to display the amount under the appropriate category – credit or debit. Here's a snippet of the viewmodel:

 function JournalViewModel() {
var self = this;
self.Period = ko.observable();
self.PayGroup = ko.observable();
self.PayGroups = ko.observableArray([]);

// Load periods using AJAX
self.LoadPeriods = function () {

    $.ajax({

        url: baseUrl + 'api/Process/Load',
        type: 'GET',
        headers: { 'Access-Control-Allow-Origin': '*' },
        dataType: 'json',
        success: function (data) {
            console.log(data);
            if (data.Successfull == 1) {
                self.Period(data.Model.CurrentPeriod);
                self.PayGroups(data.Model.Paygroups);
            }

        },
        error: function (request, error) {
            console.log(error);
        }
    });
}

self.periodId = ko.observable();
self.PaygroupId = ko.observable();
self.Journal = ko.observableArray([]);
self.PayMaster = ko.observableArray();

// Load journal data using AJAX
self.LoadJournal = function () {

    $.ajax({

        url: baseUrl + 'api/Journal/LoadJournal/'+periodId +'/'+self.PaygroupId(),
        type: 'GET',
        cache: false,
        headers: { 'Access-Control-Allow-Origin': '*' },
        dataType: 'json',
        success: function (data) {              
            if (data.HasError == 0) {
                self.Journal(data.Model);
                console.log(data.Model);
                alert("Journal Successfully Processed");
                $("#listTable").DataTable();

            }

        },
        error: function (request, error) {
            console.log(error);
        }
    });
}

self.StartDate = ko.observable()
self.EndDate = ko.observable()
self.NbDays = ko.observable();
self.NbHours = ko.observable();
self.Code = ko.observable();
self.CountEmployees = ko.observable();
self.LoadPeriods();
}
ko.applyBindings(new JournalViewModel());

This is my view:

  @{
    ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
  <nav role="navigation" aria-labelledby="system-breadcrumb">
 <ol class="breadcrumb">
    <li><a href="#">Process</a></li>
    <li><a href="#">Journals</a></li>
 </ol>
 </nav>
  <div class="box box-primary">
  <div class="box-body">
    <div class="col-md-12">
        <div class="col-md-2">
             <div class="form-group">
                <label for="PeriodTxt">Pay Group</label>
                <select data-bind="options: PayGroups,
                    optionsText: 'Name',
                    optionsValue: 'Id',
                    optionsCaption: 'Choose...',
                    value:PaygroupId" class="form-control"></select>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="PeriodTxt">Period</label>
                <input id="FullNameTxt" class="form-control" type="text" 
   readonly="readonly"
                       data-bind="value:Period()?Period().Code:''" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="StatusTxt">Number of Hours</label>
                <input id="StatusTxt" class="form-control" type="text" 
 readonly="readonly"
                       data-bind="value:Period()?Period().NbHours:''" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <label for="ds"></label>
                <input type="submit" value="Load Journal" data-
  bind="click:LoadJournal" class="btn btn-primary btn-block" />
            </div>
        </div>
    </div>
 </div>
 </div>
  <div class="well">
   <div class="well-body">
    <table id="listTable" class='table table-striped table-bordered'>
        <thead>
            <tr>
                <th>
                    Account Code
                </th>
                <th>
                    Name
                </th>
                <th>
                    Debit
                </th>
                <th>
                    Credit
                </th>

            </tr>
        </thead>
        <tbody data-bind="foreach:Journal">             
                <tr>
                    <td data-bind="text:AcctId">                            
                    </td>
                    <td data-bind="text:AcctDescription">                           
                    </td>
                    <!-- ko if:Debit==1 -->
                    <td data-bind="text:Amount">                        
                    </td>
                    <!-- /ko -->
                    <!-- ko if:Credit==1 -->
                    <td data-bind="text:Amount"></td>
                    <!-- /ko -->                                                                
 </tr>

        </tbody>
    </table>
</div>
 </div>
 @section Scripts{
 <script>periodId = '@ViewBag.PeriodId';</script>
 }