Objects properties in JavaScript does not work

Question

I'm tried to implement objects extension in JavaScript but I don't understand why this code does not work:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Question 027</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
<body>
    <button onclick="retrievingAddressData()">getting address data</button> <br />

    <p id="objectData">Object Data here</p>
    <script>
        const Customer = function (firstName, lastName,address) {
            this.firstName = firstName;
            this.lastName = lastName;
            this.address = address;
            function Address() {
                return this.address;
            }
        }

        Customer.prototype = {
            parseAddress: function (data) {
                //this.address = data.address; 
                this.address = data;
            }
        };

        Customer.prototype.loadAddress = function () {
            var customer = this;
            $.get('data.xml', function (data) {
                //customer.parseAddress(data); 
                customer.parseAddress($(data).find('address').text());
            })
                .done(function (data) {
                    //customer.parseAddress($(data).find('address').text());
                    console.log('all rigth!');
                })
                .fail(function () { console.log('error:') })
                .always(function () { console.log('finished') });
        }
        // 
        function retrievingAddressData() {
            const objCustomer = new Customer("Luz", "Tellez","Madrid");
            var respuesta = document.getElementById("objectData");
            respuesta.innerHTML = "*** Customer:firstname: "
                + objCustomer.firstName + " lastname:" + objCustomer.lastName;
            objCustomer.loadAddress();
            console.log(objCustomer.Address);
            respuesta.innerHTML += " address:" + objCustomer.Address;
        }
    </script>
</body>
</html>

The content of xml file is summarize here: data.xml

<Customer>
  <address>Madrid</address>
</Customer>

When I recover Xml data and update the object with extended prototype method, the value is not udpated, and when I recover the address value at the end of my code, this is: 'undefine'

Why?

You never set a property called `Address` on either `Customer` instance or prototype. Why do you expect such a property to exist? — Sebastian Simon, Oct 03 '20 at 15:29

score 0 · Answer 1 · answered Oct 03 '20 at 15:31

0

Forget all the extra stuff around loading it - your object does not even expose a method called Address (capital "A"):

const Customer = function (firstName, lastName,address) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.address = address;
    function Address() {
        return this.address;
    }
}

var cust = new Customer("Test","Test","MyAddress");

console.log(cust.Address());
console.log(cust.address);

You either need to add this method on the object using this or just use the lowercase address:

const Customer = function (firstName, lastName,address) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.address = address;
    this.Address = function() {
        return this.address;
    }
}

var cust = new Customer("Test","Test","MyAddress");

console.log(cust.Address());
console.log(cust.address);

answered Oct 03 '20 at 15:31

Jamiec

133,658
13
134
193

I see, but when I load the data with $.get() from xml file, the value of address is empty, and I don't know why?, try my code putting the this in the method Address and you can see what I about it! – Luz Janneth Tellez Oct 03 '20 at 15:42
@LuzJannethTellez your code to load the address is asynchronous, you'll need to wait for it to finish loading before trying to display it - search around for how to wait for an asynchrnonous action to complete there are literally thousands of questions about it – Jamiec Oct 03 '20 at 15:44
so: I must find "how to wait the answer of asynchronous data update after display the data in ajax javascript"? does it you advise me to find it? – Luz Janneth Tellez Oct 03 '20 at 15:49
but, why does not display the value of address passed in a construction creation? It is empty (blank) should be "Madrid"! – Luz Janneth Tellez Oct 03 '20 at 15:56
@LuzJannethTellez https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323 – evolutionxbox Oct 03 '20 at 16:28

Objects properties in JavaScript does not work

1 Answers1