How to get the names of an object's properties in javascript

Question

Below code from URL (http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin) returns "John Doe 25". How can I fetch the property names like "fname lname age"?

<!DOCTYPE html>
<html>
   <body>
      <p>Click the button to loop through the properties of an object.</p>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
             var person = {fname:"John", lname:"Doe", age:25}; 

             var text = "";
             var x;
             for (x in person) {
                 text += person[name] + " ";
             }
             document.getElementById("demo").innerHTML = text;
         }
      </script>
   </body>
</html>

name isn't defined in your code. Did you mean person[x]? — castletheperson
– castletheperson, Commented Feb 2, 2017 at 23:34

Matthew Cawley · Accepted Answer · 2017-02-03 00:01:19Z

1

You can get an array of all of the object properties (aka keys!) using the keys function:

Object.keys(person);

So to print out the list of key/value pairs you can do:

var person = { fname:"John", lname:"Doe", age:25 }; 
var personProps = Object.keys(person);
for(var i = 0; i < personProps.length; i++){
    var key = personProps[i];
    var value = person[key];
    console.log(key + " : " + value);
}

Or you can loop around the object's properties directly as follows:

var person = { fname:"John", lname:"Doe", age:25 }; 
for (key in person) {
    console.log(key + " : " + person[key]);
};

Output:

fname : John
name : Doe
age : 25

edited Feb 3, 2017 at 0:01

answered Feb 2, 2017 at 23:30

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1934643 Over a year ago

Thank you Matthew and everyone for your quick assistance!

ibrahim mahrir · Accepted Answer · 2017-02-02 23:32:40Z

0

Use Object.keys(yourObj) to get an array of keys. Like:

function myFunction() {
  var person = {
    fname: "John",
    lname: "Doe",
    age: 25
  };

  var text = "";
  var x;
  var keys = Object.keys(person);
  for (x = 0; x < keys.length; x++) {
    text += keys[x] + " ";
  }
  document.getElementById("demo").innerHTML = text;
}

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

answered Feb 2, 2017 at 23:32

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Comments

ded · Accepted Answer · 2017-02-02 23:38:42Z

0

You see that loop:

for (x in person) {
    text += person[name] + " ";
}

x will be the properties of the person object.

answered Feb 2, 2017 at 23:38

ded

1501 silver badge11 bronze badges

Comments

castletheperson · Accepted Answer · 2017-02-02 23:47:33Z

0

A for..in loop already iterates over the keys of the object. You just change person[x] to x.

var button = document.getElementById('tryit');
var output = document.getElementById('demo');
var person = { fname: "John", lname: "Doe", age: 25 };

button.onclick = function() {
  var text = "";
  for (var x in person) {
    text += x + " ";
  }
  output.innerHTML = text;
};

<p>Click the button to loop through the properties of an object.</p>
<button id="tryit">Try it</button>
<p id="demo"></p>

It's also common to use Object.keys along with Array.prototype.forEach to do the same thing, but without iterating over any inherited properties from the prototype of the object.

var text = "";
Object.keys(person).forEach(function(x) {
    text += x + " ";
});

edited Feb 2, 2017 at 23:47

answered Feb 2, 2017 at 23:42

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

Collectives™ on Stack Overflow

How to get the names of an object's properties in javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related