Unable to Read Property of JavaScript Object

Question

My property read value is not working properly. It reads object name as string in place of property of object.

I am trying to create object and based on object name setting its property.

Then I just want to see the properties but using loop. Method "this.propertyname" works fine.

    function bulding(buildingType)
{  
    console.log("In main function");
    this.room=2;
    this.clr = "green";
    this.scrn = null ;

    getType();

    function getType()
    {  console.log("In control function");
        switch(buildingType){
            case "home":
            setBuildingas(2,"green",null);
            break;

            case "office":
            setBuildingas(20,"white",null);
            break;

            case "mall":
            setBuildingas(200,"asorted",null);
            break;

            case "theater":
            setBuildingas(20,"white","78cm");
            break;

            default:
            console.log("Please Enter Valid Type");
            break;

        }
    }

    function setBuildingas(noOfRooms,buldingColor,theaterScreen){
        this.room=noOfRooms;
        this.clr=buldingColor;
        this.scrn=theaterScreen;
        valueGetter(buildingType);

    }


}

function valueGetter(obj){
  for(var key in obj)
  {     
    console.log(key + " has value of "+obj[key]);       


  }
} 


console.log("In Script");

var house = new bulding("home");

var house2 = new bulding("mall");

var house3 = new bulding("theater");

Basically function valueGetter is not giving me desire out put of all values of property

Answer 1

I modified your answer and here is the result:

    function bulding(buildingType)
{  
    console.log("In main function");
// Need to declare "this" in global scope (this in function setBuildingas is already something else!)
    var me = this;
// Set everything to variable "me"
    me.room=2;
    me.clr = "green";
    me.scrn = null ;

    getType();

    function getType()
    {  console.log("In control function");
        switch(buildingType){
            case "home":
            setBuildingas(2,"green",null);
            break;

            case "office":
            setBuildingas(20,"white",null);
            break;

            case "mall":
            setBuildingas(200,"asorted",null);
            break;

            case "theater":
            setBuildingas(20,"white","78cm");
            break;

            default:
            console.log("Please Enter Valid Type");
            break;

        }
    }

    function setBuildingas(noOfRooms,buldingColor,theaterScreen){
        me.room=noOfRooms;
        me.clr=buldingColor;
        me.scrn=theaterScreen;
// Call the valueGetter with the local object "me"
        valueGetter(me);

    }


}

function valueGetter(obj){
  for(var key in obj)
  {     
    console.log(key + " has value of "+obj[key]);       


  }
} 


console.log("In Script");

var house = new bulding("home");

var house2 = new bulding("mall");

var house3 = new bulding("theater");

Also, see jsFiddle here: http://jsfiddle.net/yWF9B/

Answer 2

Example using ECMA5 Function.prototype.bind

(and some other ECMA5 methods just for fun)

And understanding the this keyword.

Javascript

// Moved here because I like defining things before they are used.
function valueGetter(obj) {
    // Using ECMA5 methods instead, just example
    Object.keys(obj).forEach(function (key) {
        console.log(key + " has value of " + this[key]);
    }, obj);
}

// I like constructors to begin with a capital letter
function Bulding(buildingType) {
    console.log("In main function");
    // Changed to function expression and removed name from function
    var setBuildingas = (function (noOfRooms, buldingColor, theaterScreen) {
        this.room = noOfRooms;
        this.clr = buldingColor;
        this.scrn = theaterScreen;
        // I guess you want to see the contents of 'this' rather than 'buildingType'
        console.log(buildingType);
        valueGetter(this);
    }).bind(this); // added the bind

    this.room = 2;
    this.clr = "green";
    this.scrn = null;
    getType();

    function getType() {
        console.log("In control function");
        switch (buildingType) {
            case "home":
                setBuildingas(2, "green", null);
                break;
            case "office":
                setBuildingas(20, "white", null);
                break;
            case "mall":
                setBuildingas(200, "asorted", null);
                break;
            case "theater":
                setBuildingas(20, "white", "78cm");
                break;
            default:
                console.log("Please Enter Valid Type");
                break;
        }
    }
}

console.log("In Script");
// I like one 'var'
var house = new Bulding("home"),
    house2 = new Bulding("mall"),
    house3 = new Bulding("theater");

Output

In Script
In main function
In control function
home
room has value of 2
clr has value of green
scrn has value of null
In main function
In control function
mall
room has value of 200
clr has value of asorted
scrn has value of null
In main function
In control function
theater
room has value of 20
clr has value of white
scrn has value of 78cm 

On jsFiddle

Another alternative would have been to go OO and create a prototype.

Javascript

// Moved here because I like defining things before they are used.
function valueGetter(obj) {
    // Using ECMA5 methods instead, just example
    Object.keys(obj).forEach(function (key) {
        console.log(key + " has value of " + this[key]);
    }, obj);
}

// I like constructors to begin with a capital letter
function Building(buildingType) {
    console.log("In main function");    
    this.room = 2;
    this.clr = "green";
    this.scrn = null;
    this.buildingType = buildingType;
    this.getType();
}

Building.prototype = {
    setBuildingas: function (noOfRooms, buldingColor, theaterScreen) {
        this.room = noOfRooms;
        this.clr = buldingColor;
        this.scrn = theaterScreen;
        // I guess you want to see the contents of 'this' rather than 'buildingType'
        console.log(this.buildingType);
        valueGetter(this);

        return this;
    },

    getType: function () {
        console.log("In control function");
        switch (this.buildingType) {
            case "home":
                this.setBuildingas(2, "green", null);
                break;
            case "office":
                this.setBuildingas(20, "white", null);
                break;
            case "mall":
                this.setBuildingas(200, "asorted", null);
                break;
            case "theater":
                this.setBuildingas(20, "white", "78cm");
                break;
            default:
                console.log("Please Enter Valid Type");
        }

        return this;
    }
};

console.log("In Script");
// I like one 'var'
var house = new Building("home"),
    house2 = new Building("mall"),
    house3 = new Building("theater");

On jsFiddle

Not in an ECMA5 environment, then there are shims available on MDN or you can use ES5 shim library. Or functional equivalents to .bind exist in many modern JavaScript libraries.

eg.

1. lodash/underscore, _.bind()
2. jQuery.proxy
3. dojo.hitch

You could also have used a closure to avoid the issue, or even call or apply.

idiomatic.js 6B by R.Waldron

As a last resort, create an alias to this using self as an Identifier. This is extremely bug prone and should be avoided whenever possible.