How to print object values correctly to a DIV using innerHTML?

Question

I'm doing a course at Codecademy and many of their beginner courses use the console.log() command to print to the console. I however would like to try using document.GetElementById() and innerHTML but it instead of printing out the details of the chosen object, it just prints "[object Object]", whereas console.log() prints the details of the key?

Here is my code:

<div id="myfrndDetails"></div>

<script>
var frnds = new Object();
frnds.bill = {
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"
}

frnds.steve = {
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"
}


var frndCard = function(frndName,frndLst) {
    for (var onefrnd in frndLst) {
        if (frndLst[onefrnd].firstName === frndName) {
            document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd];
            return frndLst[onefrnd];
        }
    }
};

frndCard("Bill",frnds);

</script>

Logging something to the console and converting something to a string are not the same thing. — Felix Kling
– Felix Kling, Commented Jun 23, 2016 at 6:29

gurvinder372 · Accepted Answer · 2016-06-23 06:24:35Z

5

but it instead of printing out the details of the chosen object, it just prints "[object Object]",

This is because frndLst[onefrnd] is an object and its toString method will print [object Object].

Either use JSON.stringify(frndLst[onefrnd]) to see JSON representation of this object

Or, replace this line

document.getElementById("myfrndDetails").innerHTML = frndLst[onefrnd];

by

document.getElementById("myfrndDetails").innerHTML = "lastname - " +  frndLst[onefrnd].lastName + " and phoneNumber " + frndLst[onefrnd].phoneNumber ;

answered Jun 23, 2016 at 6:24

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

3 Comments

theAussieGuy Over a year ago

Thank you. That's perfect. Your last option was totally on point for my next question. Much appreciated.

theAussieGuy Over a year ago

Just one question though. If using the third solution that you suggested would you still use return frndLst[oneFrnd] ? Wouldn't that just store the JSON objects?

gurvinder372 Over a year ago

Yes, that will simply return the object.

Maria Zaman · Accepted Answer · 2016-06-23 06:31:58Z

1

Change your function like this :

var frndCard = function(frndName,frndLst) {
    for (var onefrnd in frndLst) {
        
        if (frndLst[onefrnd].firstName === frndName) {
            var output = '';
            for (property in frndLst[onefrnd]) {
                output += property + ': ' + frndLst[onefrnd][property]+"; <br>\n";
              }
            document.getElementById("myfrndDetails").innerHTML = output;
            return frndLst[onefrnd];
        }
    }
};

answered Jun 23, 2016 at 6:31

Maria Zaman

363 bronze badges

1 Comment

theAussieGuy Over a year ago

Worked a charm. Thanks Maria.

Krishna · Accepted Answer · 2016-06-23 06:33:39Z

1

It's an JSON array. To print JSON array you hav to use JSON.stringify

 document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

Or If you want to print Firstname, lastname and phonenumber separetly you need to get value of key using array index like below.

document.getElementById("myfrndDetails").innerHTML = "lastname - " +  frndLst[onefrnd].lastName + " and phoneNumber " + frndLst[onefrnd].phoneNumber ;

answered Jun 23, 2016 at 6:33

Krishna

9031 gold badge11 silver badges24 bronze badges

Comments

Sandeep Nayak · Accepted Answer · 2016-06-23 06:25:48Z

0

You could print it as a string using JSON.stringify like below:

This would print the whole object as is:

 document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

answered Jun 23, 2016 at 6:25

Sandeep Nayak

4,7571 gold badge25 silver badges34 bronze badges

Comments

Mircea Man · Accepted Answer · 2016-06-23 06:34:48Z

0

When you're attempting to display frndLst[onefrnd]; you're actually asking for the toString() representation of the Object you are printing.

You can find some info on the above here:

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Personally i would suggest building your own function that performs a pretty print of the object in cause or go for a rudimental string representation of the object using JSON's stringify functionality.

document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

answered Jun 23, 2016 at 6:34

Mircea Man

989 bronze badges

Comments

IRSHAD · Accepted Answer · 2016-06-23 06:39:39Z

You have to convert the object in string. See the below code:

 <div id="myfrndDetails"></div>

<script>
var frnds = new Object();
frnds.bill = {
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"
}

frnds.steve = {
    firstName: "Bill",
    lastName: "Gates",
    phoneNumber: "8778787"
}


var frndCard = function(frndName,frndLst) {
    for (var onefrnd in frndLst) {
        if (frndLst[onefrnd].firstName === frndName) {
            document.getElementById("myfrndDetails").innerHTML = JSON.stringify(frndLst[onefrnd]);

            console.log(frndLst[onefrnd]); 
            //will print  Object { firstName="Bill", lastName="Gates", phoneNumber="8778787"}

            //return frndLst[onefrnd];
            // this will return [object Object]

            return JSON.stringify(frndLst[onefrnd]);
            // will print {"firstName":"Bill","lastName":"Gates","phoneNumber":"8778787"}
        }
    }
};

frndCard("Bill",frnds);

</script>

Collectives™ on Stack Overflow

How to print object values correctly to a DIV using innerHTML?

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related