0

Here's my code -

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'jquery',
    'mage/url',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/checkout-data',
    'Magento_Checkout/js/action/select-shipping-address'
],
function (
    ko,
    Component,
    _,
    $,
    urlBuilder,
    quote,
    checkoutData,
    selectShippingAddress
) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/shipping-address/list'
        },

        initObservable: function () {

        this._super()
            .observe({
                foo: ko.observable(false)                    
            });
        this._super()
            .observe({
                phoenix: ko.observable(false)                    
            });

        this.addresses = window.checkoutConfig.addresses;


        this.phoenix.subscribe(function(someVal){
            console.log("phoenix");
            var group = someVal;
            this.addresses.filter(function(el){
                console.log(el);
                return el.indexOf('Montreal');
            });
       this.foo.subscribe(function (newValue) {
            console.log(newValue);

        });


        return this;
        },



        initialize: function () {
            this._super();

            return this;
        },


        getAddressGroups:function(){
            return window.checkoutConfig.addressGroups;
        }


    });
},


 );

Error: TypeError: this.addresses is undefined

As far as I understand, this.addresses is a global variable. Thanks

0

1 Answer 1

0

This is a context issue as the context of this changes in Javascript, inside the below code:

this.phoenix.subscribe(function(someVal){
    console.log("phoenix");
    var group = someVal;
    this.addresses.filter(function(el){
        console.log(el);
        return el.indexOf('Montreal');
});

this does not have the same context as it does when you are setting it.

When you set it this is the component, and when you try and access it this looks to be the event from the subscribe event (check by adding console.log(this) inside your subscribe function.

You can solve it by storing the 'correct' context in a variable. Outside your subscribe function add var self = this; and then use self instead of this - self.addresses.filter(function(el).

I recommending reading about this in Javascript - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

The working code would be:

var self = this;

this.phoenix.subscribe(function () {
    self.addresses.filter(function (el) {
        console.log(el);
        return el.indexOf('Montreal');
    });
});
3
  • Thanks! However, I am getting an error - self.addresses.filter is not a function. Is there some way that I can assign the return value of this.phoenix.subscribe to this.addresses?
    – coderGeek
    Commented Jul 30, 2019 at 13:40
  • What does console.log(window.checkoutConfig.addresses); return? It sounds like it is not an array which is why filter is not an array. The subscribe function isn't returning anything so I'm unsure what you need to do sorry.
    – Ben Crook
    Commented Jul 30, 2019 at 15:24
  • window.checkoutConfig.address returns array [{ "optionLabel":"Hello1", "optionValue":"1" }, { "optionLabel":"Hello2", "optionValue":"2" }, { "optionLabel":"Hello3", "optionValue":"3" }, { "optionLabel":"Hello4", "optionValue":"4" }]. Here's what I need - I have two dropdowns. When the value of one changes, the options in the other one should update. Thanks
    – coderGeek
    Commented Jul 30, 2019 at 15:32

Your Answer

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

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