Magento 2 how to send information from Knockout Js to Js component?

Question

I'm trying to send an array of data from a Knockout Js component to a JS file so I can do an ajax request there.

Here is what I'm doing:

phtml:

<div class="container">
  <div class="notification">
    <div id="portability-conversion" data-bind="scope:'portabilityconversion'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    {
        "#portability-conversion": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "portabilityconversion": {
                        "component": "Vendor_GetQuote/js/quote",
                        "quote_data": <?php /* @escapeNotVerified */ echo $data ?>,
                        "employee_quote": <?php /* @escapeNotVerified */ echo $employee ?>
                    }
                }
            }
        }
    }
    </script>
    </div>
  </div>
      <div class="buttons">
        <button class="button is-link common-place-order" style="margin:auto">Add to Cart</button>
      </div>
</div>

<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "ajaxrequest": {
                        "component": "Vendor_GetQuote/js/ajax-request"
                    }
                }
            }
        }
    }
  </script>

On quote.js I work with data dinamically, so I can update and push this data to an observable array called data.

define(['jquery', 'uiComponent', 'ko'], function ($, Component, ko) {
    'use strict';
    return Component.extend({
        defaults: {
            template: 'Transom_GetQuote/portability',
            template2: 'Transom_GetQuote/conversion-life',
            data:  ko.observableArray([]),
            employee:  ko.observableArray([])
        },
        
        initialize: function () {
            this._super();
            this.employee.push({
                EMP_NOM:this.employee_quote.EMP_NOM,
                EE_basic_amount_original:this.employee_quote.EE_basic_amount_original,
                EE_basic_amount:this.employee_quote.EE_basic_amount,
                EE_supp_amount:this.employee_quote.EE_supp_amount,
                EE_supp_amount_original:this.employee_quote.EE_supp_amount_original,

            })
            console.log(this.quote_data);
            console.log(this.employee_quote);
            var coverageData = function (name, value){
                this.Name = name;
                this.Value   = value;
            };

            this.coverages = ko.observableArray([
                new coverageData("100%",1),
                new coverageData("75%",0.75),
                new coverageData("50%",0.50),
            ]);
    
            this.child_basic_coverage = ko.observable();
            this.child_supp_coverage = ko.observable();
            this.employee_basic_coverage = ko.observable();
            this.employee_supp_coverage = ko.observable();

            var self = this;
            self.basicChange = function() {
                if (typeof this.EMP_NOM !== 'undefined') {
                    this.EE_basic_amount = this.EE_basic_amount_original*self.employee_basic_coverage();
                    self.employee([]);
                    self.employee(this);
                }
                else if(typeof this.SP_FIRST_NAME !== 'undefined'){
                    alert("It's an Spouse");
                }
                else if(typeof this.child_FIRST_NAME !== 'undefined'){
                    alert("It's a Children");
                }
            }

            self.suppChange = function() {
                if (typeof this.EMP_NOM !== 'undefined') {
                    this.EE_supp_amount = this.EE_supp_amount_original*self.employee_supp_coverage();
                    self.employee([]);
                    self.employee(this);
                }
                else if(typeof this.SP_FIRST_NAME !== 'undefined'){
                    alert("It's an Spouse SUPP");
                }
                else if(typeof this.child_FIRST_NAME !== 'undefined'){
                    alert("It's a Children SUPP");
                }
            }

            // this.children = ko.observableArray([]);
            this.displayChildrenTable = ko.observable(false);
            // this.spouse = ko.observableArray([]);
             this.loadChildren(this.quote_data[0].childs) == true ? this.displayChildrenTable(true) : this.displayChildrenTable(false);
        
        },

        loadChildren: function (children_data) {
            if(children_data.length > 0){
                for(var i = 0; i < children_data.length; i++){
                    this.data.push(children_data[i]);
                }
                return true;
            }
            else{
                return false;
            }
        },
        
        getChildren: function () {
            return this.quote_data[0].childs;
        },

        getSpouse: function () {
            return this.quote_data[0].wife;
        },

        getEmployee: function () {
            return this.employee;
        }
    });
}
);

Finally on ajax-request.js I wan't to get the property data.

define( [ 'jquery', 'ko', 'uiComponent', 'Vendor_GetQuote/js/quote' ], function( $, ko, Component, portconv ) { 'use strict';

    $(document).on('click', '.common-place-order', function (event) {
        var data = portconv.call().data; //here quote.js component is loaded
        console.log(data);
    });
}

);

Result:

Error, because knockout js quote.js is trying to load everything from the beginning, all data. So logically it's null because I'm not sending that data again to that component.

I don't know how to deal with this, I'm not very skilled on Magento frontend. I was thinking in not creating a knockout js, but just functions for returning data, however it will be the same result, because data is empty.

Greetings!

Answer 1

Within ajax-request.js try using portconv.data() instead. This should return the actual KO observable without calling the Component as a whole