How to get window.checkoutConfig value in html file using data-bind

Question

I made my custom delivery method programmatically. It also appears in the Magento 2 admin config section. It is a multi-select field with values of days of the week. In my js file below:

define(
 [
 'ko',
 'uiComponent',
 'underscore',
 'Magento_Checkout/js/model/step-navigator',
 'Magento_Customer/js/model/customer'
 ],
 function (
 ko,
 Component,
 _,
 stepNavigator,
 customer
 ) {
 'use strict';
 /**
 * check-login - is the name of the component's .html template
 */
 return Component.extend({
 defaults: {
 template: 'A4_CustomDelivery/check-login'
 },
 //add here your logic to display step,
 isVisible: ko.observable(true),
 isLogedIn: customer.isLoggedIn(),
 //step code will be used as step content id in the component template
 stepCode: 'isLogedCheck',
 //step title value
 stepTitle: 'Delivery Date & Time',
 /**
 *
 * @returns {*}
 */
 initialize: function () {
 this._super();
 // register your step
 stepNavigator.registerStep(
 this.stepCode,
 //step alias
 null,
 this.stepTitle,
 //observable property with logic when display step or hide step
 this.isVisible,
 _.bind(this.navigate, this),
 /**
 * sort order value
 * 'sort order value' < 10: step displays before shipping step;
 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
 * 'sort order value' > 20 : step displays after payment step
 */
 15
 );
 return this;
 },
 /**
 * The navigate() method is responsible for navigation between the checkout step
 * during checkout. You can add custom logic, for example, some conditions
 * for switching to your custom step
 */
 navigate: function () {
 },
 /**
 * @returns void
 */
 navigateToNextStep: function () {
 var customDate = window.checkoutConfig.a4date;
 var customTime = window.checkoutConfig.a4time;
 console.log(customDate);
 console.log(customTime);
 
 stepNavigator.next();
 }
 });
 }
);

When I use console.log to check its value, it returns those selected items successfully but I want to use its value in the option tag in an HTML file below:

<!--Use 'stepCode' as id attribute-->
<li data-bind="fadeVisible: isVisible, attr: { id: stepCode }">
 <div class="step-title" data-bind="i18n: stepTitle" data-role="title"></div>
 <div id="checkout-step-title"
 class="step-content"
 data-role="content">
 <p>The customer is <span data-bind="if: !isLogedIn">not</span> Logged-in</p>
 <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
 <label for="deliverydate">Delivery Date:</label>
 <input type="date"
 id="deliverydate"
 name="deliverydate"
 min="2022年08月10日"
 max="2050年08月31日">
 <label for="appt">Select a time:</label>
 <input type="time" id="appt" name="appt">
 
 <div class="actions-toolbar">
 <div class="primary">
 <button data-role="opc-continue" type="submit" class="button action continue primary">
 <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
 </button>
 </div>
 </div>
 </form>
 </div>
</li>

I want to make a select HTML field with option values obtained from window.checkoutConfig.a4date in this file. These are the values

Array(3) [ "Tuesday", "Friday", "Saturday" ] checkout-login-step.js:80:25

How can I achieve that?

Answer 1

Add these 2 lines in html file.

<select data-bind="event:{ change: getDate}, options: availableDates, selectedOptions: chosenDate"></select>
<select data-bind="event:{ change: getTime}, options: availableTimes, selectedOptions: chosenTime"></select>

and get values from the function window.checkoutConfig.<YOUR_VALUE> as follows:

let date = window.checkoutConfig.a4date;
 let dateValues = date.toString().split(",");
 if (dateValues[0] === '') {
 dateValues = [];
 dateValues.push('Tuesday');
}
let time = window.checkoutConfig.a4time;
 let timeValues = time.toString().split(",");
 if (timeValues[0] === '') {
 timeValues = [];
 timeValues.push('13:00-16:00');
 }

Finally, use these values in the functions created.

chosenDate : ko.observableArray([dateValues[0]]),
 availableDates : ko.observableArray(
 (dateValues)
 ),
 getDate:function (data, event) {
 //console.log(this.chosenDate());
 },
chosenTime : ko.observableArray([timeValues[0]]),
 availableTimes : ko.observableArray(
 (timeValues)
 ),
 getTime:function (data, event) {
 //console.log(this.chosenTime());
 }