Question

I’ve got a custom class in Javascript called Booking:

function Booking(technicianID, startTime, start, street, zipcode, jobtypeID) {
    this.technicianID = technicianID;
    this.startTime = startTime;
    this.start = start;
    this.street = street;
    this.zipcode = zipcode;
    this.jobtypeID = jobtypeID;
}

I want to use an object of this class as input in a function.

function bookTime(inputBooking) {
    var tmpBooking = inputBooking;
    alert("You chose: " + tmpBooking.start + ". Tech: " + tmpBooking.technicianID);
}

But for some reason all I get from the alert is “undefined” for the variables. I guess it’s because it doesn’t see inputBooking as a Booking object, which means it doesn’t have the variables start and technicianID…

I read that there is a Object.create function you can use, but I can’t get it to work.

    tmpBooking = Object.create(Booking, inputBooking); 

Any ideas on how to solve this?

EDIT:

If I send in the inputBooking object from javascript directly it works as expected.

    var tmpBooking = new Booking(tmpTechID, tmpStartTime, tmpStart, tmpStreet, tmpZipcode, tmpJobtypeID);

    bookTime(tmpBooking);
    //Works

But the problem is that I want to send a temp object to HTML and generate a button that will call the bookTime function:

    var tmpBooking = new Booking(tmpTechID, tmpStartTime, tmpStart, tmpStreet, tmpZipcode, tmpJobtypeID);

    resultsHTML += "<a href=\"#\" onclick=\"bookTime('" + tmpBooking + "')\">Book!</a>";
    //Doesn't work

When I run this with debugger it says that inputBooking is of type [object Object] and “Children could not be evaluated”.. The result is that start and technicianID variables are undefined.

Answer 1

There is nothing wrong in the code that you show. If you call the function with an actual Booking object, it works as expected:

bookTime(new Booking('Tech1', 'Now', 'Now', 'Here', 'Zip', 'Job'));

Demo: http://jsfiddle.net/Guffa/fRmA2/

So, your problem is most likely that it’s not a Booking object that you send into the function.

Edit:

You are creating HTML code that contains the string representation of the object, but the string representation of the object can’t be used to recreate an object that looks the same.

Either use the variable in the code:

resultsHTML += "<a href=\"#\" onclick=\"bookTime(tmpBooking)\">Book!</a>";

or create code that will create an object:

resultsHTML += "<a href=\"#\" onclick=\"bookTime(new Booking(tmpTechID, tmpStartTime, tmpStart, tmpStreet, tmpZipcode, tmpJobtypeID))\">Book!</a>";

However, depending on where you get the data from, or whether you are using it in a loop, neither of those may work. If the variables that you use are not available globally, you would need to use the values of each variable to create code that creates the object. Something like:

resultsHTML += "<a href=\"#\" onclick=\"bookTime(new Booking('"+tmpTechID.replace(/\\/g,'\\\\').replace(/'/g,'\\'')+", '"+tmpStartTime.replace(/\\/g,'\\\\').replace(/'/g,'\\'')+", '"+tmpStart.replace(/\\/g,'\\\\').replace(/'/g,'\\'')+", '"+tmpStreet.replace(/\\/g,'\\\\').replace(/'/g,'\\'')+", '"+tmpZipcode.replace(/\\/g,'\\\\').replace(/'/g,'\\'')+", '"+tmpJobtypeID.replace(/\\/g,'\\\\').replace(/'/g,'\\'')+"))\">Book!</a>";