Traversing Object Properties

var obj = { name: "Simon", age: "20", clothing: { style: "simple", hipster: false } } for(var propt in obj){ console.log(propt + ': ' + obj[propt]); }

How does the variable propt represent the properties of an object?It is not a built-in method or property.Why does it contain every attribute in an object?

#1st floor

Traversal properties require this additional hasOwnProperty check:

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // do stuff
    }
}

This is necessary because the object's prototype contains other properties of the object that are technically part of the object.These additional properties are inherited from the underlying object class but remain obj properties.

hasOwnProperty Check only if the property is specific to the class, not inherited from the base class.

hasOwnProperty can also be called from the object itself:

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

This will fail, however, if the object has an unrelated field with a different name:

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

This is why it is safer to call through Object.prototype:

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

#2nd floor

Starting with JavaScript 1.8.5, you can use Object.keys(obj) to get an array of properties defined on the object itself (obj.hasOwnProperty(key) returns true's obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

This is better (more readable) than using a for-in loop.

These browsers support it:

  • Firefox: 4 (2.0)
  • Chromium: 5
  • Internet Explorer: 9

For more information, see Reference to Mozilla Developer Network Object.keys() .

#3rd floor

The for..in loop creates a new variable (var someVariable) and stores each property of a given object in the new variable (someVariable).Therefore, if you use block {}, you can iterate.Consider the following example.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

#4th floor

The for... In loop represents each property in the object because it is like a for loop.You define propt in the for... In loop by doing the following:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

For... In loops through enumerable properties of an object.Defined variables or variables placed in the for... In loop change each time you go to the properties of the next iteration.The variable in the for... In loop iterates over keys, but its value is the value of the key.For example:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

You can see the difference between a variable and its value.Conversely, for... Of loops are the opposite.

I hope this helps.

#5th floor

I want to add the above answer, because you may have different intentions than Javascript.JSON objects and Javascript objects are different things, and you might want to use the solution presented above to traverse the properties of JSON objects, then be surprised.

Suppose you have a JSON object, for example:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

The wrong way to traverse its Properties:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

You may be surprised to see 0,1 in the console log, isochronously through the iteration's properties prop 1 and prop2 and prop3_1.These objects are sequences, and the index of the sequence is a property of the object in Javascript.

A better way to recursively traverse JSON object properties is to first check if the object is a sequence:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === 'string')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

Keywords: Javascript JSON Attribute Firefox

Added by dennismonsewicz on Sat, 04 Jan 2020 18:20:15 +0200