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>
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 ;
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]; } } };
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]);
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>
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 ;
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]);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.