How to get Data from system.xml file

Question

I created system.xml file where seller can select multiple options (e.g Days of the week). Now i need to use that data in checkout page as . Where customer can select one option (e.g any day from selected days). How can i get those selected days in my checkout js and html file?

    [
        '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: 'RolusTech_DateAndTime/date-time'
            },


            //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: 'Select Day & 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 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 () {
                stepNavigator.next();
            }
        });
    }
);

Answer 1

You should pass system.xml data to customer by CompositeConfigProvider.

define CompositeConfigProvider in your di.xml file

app/code/{{Vendorname}}/{Modulename}/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">    
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="checkout_custom_shipping_block" xsi:type="object">VendorName\ModuleName\Model\CustomConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Create your Model file.

app/code/{{Vendorname}}/{Modulename}/Model/CustomConfigProvider.php

<?php
namespace Vendorname\Modulename\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

class CustomConfigProvider implements ConfigProviderInterface
{
    protected $scopeConfig;
    const XML_PATH_SETTING_DATA = 'yourvaluepath';

   public function __construct(\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig)
   {
      $this->scopeConfig = $scopeConfig;
   }


    public function getConfig()
    {

        $storeScope = \Magento\Store\Model\ScopeInterface::SCOPE_STORE;
        $yourvalue = $this->scopeConfig->getValue(self::XML_PATH_SETTING_DATA, $storeScope);
        $config = [];
        $config['yourcustomdata'] = $yourvalue;

        return $config;
    }
}

Clear cache and you will get it in javascript customer object.

Get value in javascript.

var customData = window.checkoutConfig.yourcustomdata;
alert(customData);