0

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!

1 Answer 1

0

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

3
  • it returned the error: portconv.data() is not a function Apr 15, 2021 at 14:11
  • If you add a breakpoint or a console log what is it? As we can see with data: ko.observableArray([]) it should return an array.
    – Ben Crook
    Apr 16, 2021 at 9:16
  • it returns error: portconv.data() is not a function, even that data is a ko.observableArray Apr 20, 2021 at 2:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.