CODEWITHSUNDEEP
javascript
brohannsebastian
brohannsebastian

Reputation: 53

Accessing properties of a variable object with JavaScript

I have a js object that looks like this:

 var object = {
      "divisions": {
          "ocd-division/country:us": {
              "name": "United States",
          }
      }
    };

I want to access the property listed under the nested object "ocd-division/country:us" (aka "name"), but the problem I'm having is that "ocd-division/country" is a variable object. Like it might be ":can" for Canada or something.

My question is, can I still access the name property under that object even though it's variable? I wrote the code I came up with below, but it calls the object literally, so it can't account for a change in the object's name. 

    var country = document.getElementById("p");
    p.innerHTML = object.divisions["ocd-division/country:us"].name;

I'm new to JavaScript so I'm sorry if this is a dumb question.

Upvotes: 5

Views: 120

Answers (4)

Oriol
Oriol

Reputation: 288120

When you don't know the properties of an object, you can use

  • for...in loop

    It iterates enumerable own and enumerable inherited properties.

  • Object.keys

    It returns an array which contains enumerable own properties.

  • Object.getOwnPropertyNames

    It returns an array which contains own properties.

// Adding properties: "ownEnumerable", "ownNonEnumerable",
// "inheritedEnumerable" and "inheritedNonEnumerable"
var obj = Object.defineProperties({}, {
  ownEnumerable: {enumerable: true},
  ownNonEnumerable: {},
});
Object.defineProperties(Object.prototype, {
  inheritedEnumerable: {enumerable: true},
  inheritedNonEnumerable: {},
});

// Display results
function log(id, arr) {
  document.getElementById(id).textContent = '[' + arr.join(', ') + ']';
}
log('forin', function(forInProps){
  for (var prop in obj) forInProps.push(prop);
  return forInProps;
}([]));
log('keys', Object.keys(obj));
log('names', Object.getOwnPropertyNames(obj));
<dl>
  <dt><code>for...in</code></dt><dd id="forin"></dd>
  <dt><code>Object.keys</code></dt><dd id="keys"></dd>
  <dt><code>Object.getOwnPropertyNames</code></dt><dd id="names"></dd>
</dl>

Upvotes: 7

DevBert
DevBert

Reputation: 149

You can iterate through object using for loop.

var obj = {
    "divisions":{
      "ocd-division/country:us":{
         "name" : "United States"
      }
    }
}

Here is the for loop

for(var a in obj){ //loop first the object
  for(var b in obj[a]){ // then second object (divisions)
    for(var c in obj[a][b]){ //then third object (ocd-division/country:us)
      if(c == 'name'){ //c is the key of the object which is name
        console.log(obj[a][b][c]); //print in console the value of name which is United States.
        obj[a][b][c] = "Canada"; //replace the value of name.
        var objName = obj[a][b][c]; //or pass it on variable. 
      }
    }
  }
}

console.log(obj); //name: Canada
console.log(objName); //name: United States

You can also use this reference:
https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Statements/for
http://stackoverflow.com/questions/8312459/iterate-through-object-properties

Upvotes: 0

George Reith
George Reith

Reputation: 13476

Sure...

for (var division in object.divisions) {
    var name = object.divisions[division].name;
    // Do what you want with name here
}

If the object has prototype methods you will want to use Object.prototype.hasOwnProperty() to ensure they don't get iterated like so:

for (var division in object.divisions) {
    if (!object.divisions.hasOwnProperty(division)) continue;
    var name = object.divisions[division].name;
    // Do what you want with name here
}

Or use Object.keys() if you don't care about IE8 support and iterate over those.

Object.keys(object.divisions).forEach(function(division) {
    var name = object.divisions[division].name;
    // Do what you want with name here
});

EDIT: Upon re-reading your question it occurs to me that you may already know the key name but want to access the object with a variable key name, which is also absolutely fine:

var division = 'ocd-division/country:us';
object.divisions[division].name;

When using [] bracket notation to access an object you can insert any code that evaluates to a string, you could even call a function in there that returns a string.

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Upvotes: 1

vinayakj
vinayakj

Reputation: 5681

object.divisions[Object.keys(object.divisions)[0]].name

Upvotes: 2

Related Questions