Loop through an object and append the properties to an html file

Question

Hi I am new to JavaScript and have been doing some practice stuff. I am struggling with looping through an Object's properties and appending each property to the DOM. Can someone provide some guidance please? I tried piecing this together through other questions but not sure where I am going wrong?

var person = {
    firstName: "john",
    lastName: "doe",
    age: 45,
    placeOfBirth: "somewhere"
}

for(var i = 0; i < person.length; i++) {
    if(hasOwnProperty(person[i])) {
        var p = document.createElement("p");
        p.innerHTML = person[i];
        document.body.appendChild(p)
    }
}

okay, so if I enclose the object person inside of an array then this shoudl work? — G.Colville, Nov 19 '16 at 18:18
but i won't suggest you to do that because it will create another for loop . time consuming — Mahi, Nov 19 '16 at 18:20
@mahi Object properties are already stored in an array; it is called `Object.keys(obj)`. — , Nov 19 '16 at 18:21
Unless you expect the text you are inserting to contain HTML that needs to be interpreted, it is preferable to use `textContent` instead of `innerHTML`. Actually, it would be preferable to create a `TextNode` and append that to the `p` element. — , Nov 19 '16 at 18:23
@torazaburo but will it take o(n) time to search keys in object ? — Mahi, Nov 19 '16 at 18:25
@Mahi I don't see where searching is involved. Who is searching for what? — , Nov 19 '16 at 18:46
`Object.keys(obj)` returns array . so it might be doing some calculation right ? — Mahi, Nov 19 '16 at 18:47
@Mahi Don't worry about that. Although it's an internal implementation issue, `Object.keys` is most likely just returning an array of properties derived directly from the internal hash table used to represent the object. It might be O(n), but with a very small constant. — , Nov 20 '16 at 02:46

Mahi · Accepted Answer · 2016-11-19T18:26:33.917

0

and you dont need person.hasOwnProperty(key) because key is property only . so it will always be true if you use if condition or not .

var person = {
    firstName: "john",
    lastName: "doe",
    age: 45,
    placeOfBirth: "somewhere"
}

for(var key in person) {
    
        var p = document.createElement("p");
        p.innerHTML = person[key];
        document.body.appendChild(p)
    
}

edited Nov 19 '16 at 18:26

answered Nov 19 '16 at 18:15

Mahi

1,707
11
22

score 0 · Answer 2 · answered Nov 19 '16 at 18:15

You are treating person as an array. An object does not have length. Use for in to iterate an object properties

Try:

var person = {
    firstName: "john",
    lastName: "doe",
    age: 45,
    placeOfBirth: "somewhere"
}

for(key in person) {
    if(person.hasOwnProperty(key)) {
        var p = document.createElement("p");
        p.innerHTML = person[key];
        document.body.appendChild(p)
    }
}

Also note corrected usage of hasOwnProperty()

DEMO

JMS Creator · Answer 3 · 2016-11-19T18:25:42.773

0

What you are looking for is:

for(var i in person){
    if(person.hasOwnProperty(i)){
        var p = document.createElement("p");
        p.innerHTML = person[i];
        document.body.appendChild(p);
    }
}

However, because the i in person refers to anything within the object, we can completely remove the if(person.hasOwnProperty(i)) because it will always have that property.

You might want to consider utilizing the Key names as well, as this will just append the value, and does nothing with the Key associated with it.

Try adding:

p.innerHTML = i + ': ' + person[i];

This should produce a "Key: value" output for each paragraph element.

edited Nov 19 '16 at 18:25

answered Nov 19 '16 at 18:18

JMS Creator

116
6

Awesome, thank you. This has helped a great deal. Is there any way that this would work with the for loop or the forEach? From what I have seen I know there are syntax differences, not sure if there are other differences between each of these for loops? – G.Colville Nov 19 '16 at 18:44
It is possible to do person.forEach( function(i){ } ) – JMS Creator Nov 21 '16 at 17:20
I highly recommend you do not use this method, because I have found that it is outdated, and there are some performance issues that have been noted as well. – JMS Creator Nov 21 '16 at 17:21
You actually can only use arr.forEach() if the type is an array, not an object, so person.forEach would not work at all. – JMS Creator Nov 21 '16 at 17:24

Loop through an object and append the properties to an html file

3 Answers3