Cannot iterate through JavaScript object

Question

As a matter of exercise, I am trying to learn how to print the key and value of a JS object. I am having a hard time.

The following is a basic object I wrote and want to just print out the key : value

var obTest = {
 name: "John",
 WeddingDate: "10/18/2008",
 NumberKids: "2",
 Website: "www.samplewebsite.com
};
/* VERSION 1
for (var key in obTest) {
 // skip loop if the property is from prototype
 if (!obTest.hasOwnProperty(key)) continue;
 var obKey = obTest[key];
 for (var obProp in obKey) {
 // skip loop if the obProperty is from prototype
 if(!obKey.hasOwnProperty(obProp)) continue;
 // your code
 alert(obProp + " : " + obKey[obProp]);
 }
};
 // note: this prints each character as a key:value
*/
/* VERSION 2
for (var key in obTest) {
 if (obTest.hasOwnProperty(key)) {
 var obKey = obTest[key];
 for (var prop in obKey) {
 if (obKey.hasOwnProperty(prop)) {
 console.log(prop + " : " + obKey[prop]);
 }
 }
 }
};
 // note: this prints each character as a key:value
*/
// VERSION 3
Object.keys(obTest.forEach(function(key) {
 console.log(key, obTest[key]);
}));
 // note: this gives me a breakpoint and can't figure out why it does not work

As noted, VERSION 1 and VERSION 2 print the same output as follows:

0 : J
1 : o
2 : h
3 : n
0 : 1
1 : 0
2 : /
3 : 1
4 : 8
5 : /
6 : 2
7 : 0
8 : 0
9 : 8
0 : 2
0 : w
1 : w
2 : w
3 : .
4 : s
5 : a
6 : m
7 : p
8 : l
9 : e
10 : w
11 : e
12 : b
13 : s
14 : i
15 : t
16 : e
17 : .
18 : c
19 : o
20 : m

I get a breakpoint using Visual Studio Code for VERSION 3.

Please help me make an output like this:

 name : John
 WeddingDate : 10/18/2008
 NumberKids : 2
 Website : www.samplewebsite.com

I do not want to have numerical keys, especially ones that repeat themselves. Other articles I read don't seem to make any sense. Python seems pretty straightforward about iterating and printing object keys and values.

Thank you!

Answer 1

You're using two nested loops, when one would be enough:

for (var key in obTest) {
 // skip loop if the property is from prototype
 if (!obTest.hasOwnProperty(key)) continue;
 //find the object corresponding to the current key
 var obKey = obTest[key];
 //output the key and the corresponding object 
 alert(key + " : " + obKey);
};

With your second loop, you enumerate all the pairs "keys : values" inside each value of your object. For a string "John", the pairs key:values are (0:"J", 1:"o", 2:"h", 3:"n")

For the version 3, you got the parenthesis wrong:

Object.keys(obTest) //close parenthesis of keys here
 .forEach(function(key) {
 console.log(key, obTest[key]); 
 }); //close only forEach here

Answer 2

The third try is promising, but wrong implemented. To get the desired output, you can use

function objectString(obj) {
 var keys = Object.keys(obj);
 return keys.map(v => v + ": " + obj[v]).join("\n");
}
console.log(objectString(obTest));

Answer 3

Just use the example from the MDN Docs

for (var property in obTest) {
 if( obTest.hasOwnProperty( property ) ) {
 console.log(property + ": " + obTest[property])
 }
}

One of the problems is that you are missing a " behind the value of your "Website"-property.

http://codepen.io/anon/pen/ozKENQ

Answer 4

Use Object.keys() to get list of keys of an object. Then iterate to get their values.

var obTest = {
 name: "John",
 WeddingDate: "10/18/2008",
 NumberKids: "2",
 Website: "www.samplewebsite.com" };
Object.keys(obTest).forEach(function(key){ 
 if (obTest.hasOwnProperty(key)){
 console.log(key + ":" + obTest[key]); 
 }
});

• host_255: does forEach skip objects that have its own properties such as obTest.hasOwnProperty. If not, because I like the brevity of code, how do I add that into this?
• Amit Kumar Gupta: forEach is just a function to iterate over an array.
• Amit Kumar Gupta: I have updated the answer to print own property only.

Answer 5

Object.keys(your_object) is your friend, it converts an object to an array. Check out the documentation here