How do you print out all properties of an object and the values assigned to them in JavaScript?

Question

Lets say you have an object you created in javaScript and you want to print out the property and the corresponding value, how would you do that? Here is an example below. Obviously in real life I wouldn't keep making objects, but bear with me here.

var houseA = {
    county: "Falls County",
    school: "Trinity West Elementary School",
    square_feet: 2500,
    specs: "3 bedroom and 2 bath"
};

for(var prop in houseA) {
    document.write(prop);
}

//This would out put 
county
school
square feet
specs

How would you make it output the values with the properties?

I know you can do it mannually by doing below.

document.write(houseA.county);
document.write(houseA.school);

so on and so fourth.

You can't have spaces in variable names – Cilan Jan 11 '14 at 20:37 — Cilan, Jan 11 '14 at 20:37

Filip Górny · Answer 1 · 2014-01-11T20:43:46.060

6

In javascript you can access values of object properties treating objects as an associative array:

for(var prop in houseA) { document.write(prop); document.write(houseA[prop]); }

EDIT:

Your object has invalid syntax, If you use space in your property name, enclose it with quotation mark, otherwise it is a syntax error.

edited Jan 11 '14 at 20:43

answered Jan 11 '14 at 20:34

Filip Górny

1,749
16
24

1

Please close your `document.write` function call with a closing parenthesis, and explain that variable names can't have spaces, referring to **square feet.** – Cilan Jan 11 '14 at 20:43
Thanks, appreciate the info. Thanks also for not giving me a negative number on my question. – dragonore Jan 11 '14 at 21:06

iandotkelly · Answer 2 · 2014-01-11T20:52:27.620

1

With JavaScript its best practice to ensure that you don't include the properties of any prototype objects you may be inheriting from, so:

for (var property in houseA) {
    if (houseA.hasOwnPropery(property)) {
        document.write(property + ': ' + houseA[property]);
    }
}

This would write out:

county: Falls County

etc

And as @ManofSnow correctly points out - you can't have a property of an object with a space in it if defined like this. However you can enclose the property in quotation marks.

edited Jan 11 '14 at 20:52

answered Jan 11 '14 at 20:40

iandotkelly

9,024
8
48
67

Thanks, works like a charm. As you can see I am learning the object orientated portion of javaScript to increase my skills. – dragonore Jan 11 '14 at 21:04
@dragonore -you're welcome - Javascript is a sometimes quirky but ultimately rewarding language if used correctly. – iandotkelly Jan 11 '14 at 21:05

TonyMtz · Answer 3 · 2014-01-11T21:04:39.857

Easy:

var prop;

for (prop in houseA) {
    if (houseA.hasOwnProperty(prop)) {
        console.log(prop + ':' + houseA[prop]);
    }
}

The use of for cycle is recommended only for iterate over the properties of an object. I declare prop var before the cycle to avoid hoisting. The method hasOwnProperty is to avoid print variables from the prototype, finally I use console.log() to print things on console, you can change it for document.write().

Cheers.

score 0 · Answer 4 · answered Jan 12 '14 at 06:20

The idiomatic HTML5 way to enumerate properties uses the Object.keys function. It would look like this;

Object.keys(houseA).forEach(function(prop) {
    console.log(prop + ':' + houseA[prop]);
});

This snippet iterates through all keys in the houseA object. Even though this version is functionally equivalent, it is preferred to using a for...in loop because it is more concise and is a more functional approach.

If you also want to iterate over non-enumerable properties, you can use the Object.getOwnPropertyNames(obj) function.

You can see this blog post for a deeper description of the differences between these styles.

How do you print out all properties of an object and the values assigned to them in JavaScript?

4 Answers4