KnockoutJS data binding not showing anything in table for each

Question

I have a JavaScript function that creates a model and apply it to a HTML using knockoutJS. In the HTML file I have two ways of showing the same data:

1- select list ( which works ) 2-Table ( not showing the same data )

Please help.

// =============  JS ========================//

      function openPayoutCreditPopup() {
            var payoutCreditViewModel = {         
                availablePayoutsToOriginalPaymentMethods: ko.observableArray(options.availablePayoutsToOriginalPaymentMethods),           
            };

            var payoutCreditPopupContainer = document.getElementById("payoutCreditPopup");
            ko.applyBindings(payoutCreditViewModel, payoutCreditPopupContainer);
        }

// ============= HTML ========================//

    <div class="payout-credit-popup pm-form">
            <div>
                <table>                     
                    <tr>
                        <td class="label">PaymentMethods</td>
                        <td class="field">
                            <select data-bind="options: availablePayoutsToOriginalPaymentMethods, optionsText: 'FinanceInfo'" class="width-75"></select>
                        </td>
                    </tr>
                    <tr>
                        <td class="label"></td>
                        <td>
                            <table >
                                <thead>
                                    <tr>
                                        <th>Payment Breakdown</th>
                                        <th>Paid</th>
                                    </tr>
                                </thead>
                                <tbody data-bind="foreach: availablePayoutsToOriginalPaymentMethods">
                                    <tr>
                                        <td data-bind="text: FinanceInfo"></td>
                                        <td>amount</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>               
                </table>
            </div>
        </div>
    </div>  

Answer 1

here is a working example based on your code. the only things I have done are

• add items to the options.availablePayoutsToOriginalPaymentMethods array
• add an ID of payoutCreditPopup to the top level div
• call the openPayoutCreditPopup function

and it appears to work fine from what I can see

var options = {};
options.availablePayoutsToOriginalPaymentMethods = [
  {FinanceInfo:'testing 1'},
  {FinanceInfo:'testing 2'},
  {FinanceInfo:'testing 3'},
 ];

function openPayoutCreditPopup() {
  var payoutCreditViewModel = {
    availablePayoutsToOriginalPaymentMethods: ko.observableArray(options.availablePayoutsToOriginalPaymentMethods),
  };

  var payoutCreditPopupContainer = document.getElementById("payoutCreditPopup");
  ko.applyBindings(payoutCreditViewModel, payoutCreditPopupContainer);
}

openPayoutCreditPopup();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="payoutCreditPopup" class="payout-credit-popup pm-form">
  <div>
    <table>
      <tr>
        <td class="label">PaymentMethods</td>
        <td class="field">
          <select data-bind="options: availablePayoutsToOriginalPaymentMethods, optionsText: 'FinanceInfo'" class="width-75"></select>
        </td>
      </tr>
      <tr>
        <td class="label"></td>
        <td>
          <table>
            <thead>
              <tr>
                <th>Payment Breakdown</th>
                <th>Paid</th>
              </tr>
            </thead>
            <tbody data-bind="foreach: availablePayoutsToOriginalPaymentMethods">
              <tr>
                <td data-bind="text: FinanceInfo"></td>
                <td>amount</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
  </div>
</div>
</div>