How to access the properties of a JavaScript object?

Question

Hi friend while review a javascript coding, i saw that

var detailInf = {
  "hTitle":"Results",
  "hMark":"98"
};

What's the concept behind this js coding. While give alert for the variable its shows as "[object Object]". So this is an object, then how can we access the variable and reveal the data from this object.

Answer 1

Try doing this:

alert(detailInf['hTitle']);
alert(detailInf.hTitle);

Both will alert "Results" - this is a Javascript object that can be used as a dictionary of sorts.

Required reading: Objects as associative arrays

As a footnote, you should really get Firebug when messing around with Javascript. You could then just console.log(detailInf); and you would get a nicely mapped out display of the object in the console.

Answer 2

That's an object in JSON format. That's a javascript object literal. Basically, the bits to the left of the :'s are the property names, and the bits to the right are the property values. So, what you have there is a variable called detailInf, that has two properties, hTitle and hMark. hTitle's value is Results, hMark's value is 98.

var detailInf = { "hTitle":"Results", "hMark":"98"};
alert(detailInf.hTitle); //should alert "Results"
alert(detailInf.hMark); //should alert "98

Edit Paolo's answer is better :-)

Answer 3

As Dan F says, that is an object in JSON format. To loop through all the properties of an object you can do:

for (var i in foo) {
    alert('foo[' + i + ']: ' + foo[i]);
}

Answer 4

That form of a JavaScript object is called an object literal, just like there are array literals. For example, the following two array declarations are identical:

var a = [1, 2, 3];          // array literal
var b = new Array(1, 2, 3); // using the Array constructor

Just as above, an object may be declared in multiple ways. One of them is object literal in which you declare the properties along with the object:

var o = {property: "value"}; // object literal

Is equivalent to:

var o = new Object; // using the Object constructor
o.property = "value";

Objects may also be created from constructor functions. Like so:

var Foo = function() {
    this.property = "value";
};

var o = new Foo;

Adding methods

As I said in a comment a few moments ago, this form of declaring a JavaScript object is not a JSON format. JSON is a data format and does not allow functions as values. That means the following is a valid JavaScript object literal, but not a valid JSON format:

var user = {
    age : 16,

    // this is a method
    isAdult : function() {
        // the object is referenced by the special variable: this
        return this.age >= 18;
    }
};

Also, the name of the properties need not be enclosed inside quotes. This is however required in JSON. In JavaScript we enclose them in brackets where the property name is a reserved word, like class, while and others. So the following are also equivalent:

var o = {
    property : "value",
};

var o = {
    "property" : "value",
};

Further more, the keys may also be numbers:

var a = {
    0 : "foo",
    1 : "bar",
    2 : "abz"
};

alert(a[1]); // bar

Array-like objects

Now, if the above object would have also a length property, it will be an array like object:

var arrayLike = {
    0 : "foo",
    1 : "bar",
    2 : "baz",

    length : 3
};

Array-like means it can be easily iterated with normal iteration constructs (for, while). However, you cannot apply array methods on it. Like array.slice(). But this is another topic.

Square Bracket Notation

As Paolo Bergantino already said, you may access an object's properties using both the dot notation, as well as the square bracket notation. For example:

var o = {
    property : "value"
};

o.property;
o["property"];

When would you want to use one over the other? People use square bracket notation when the property names is dynamically determined, like so:

var getProperty = function(object, property) {
    return object[property];
};

Or when the property name is a JavaScript reserved word, for example while.

object["while"];
object.while; // error