Trying to output search for a friend result to HTML with no success


#1

Hi, can anyone help with this please? I've completed the search contact list exercise and the search function is working correctly when the function "search" asks to print the result to the console.log. However I now want to style it by printing the result of "Steve" to html.
I'm trying to use document.getElementById however it isn't printing the name.
It should replace "first name" with "Steve", but instead it replaces it with [object Object]

Once I get it working I can use this for each of the keys in the contact list.

Can anyone help?

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
	<title>contact list</title>
	<link rel="stylesheet" href="contact-list.css">
</head>
<body>

<p id="firstName">first name</p>
<p id="lastName">last name</p>
<p id="number">10</p>
<p id="address">some street</p>

</body>
<script>
var friends = {
    bill:{
        firstName: "Bill",
        lastName: "Gates",
        number: "(61)101010",
        address: ["1 Oakley Road","Bondi","NSW"]
        },
    steve:{
        firstName: "Steve",
        lastName: "Jobs",
        number: "(61)101012",
        address: ["2 Oakley Road","Paddington","NSW"]
        }
    };
var list = function (friends){
for(var key in friends){
    console.log(key);
}
}

var search = function (name){
    for(var key in friends){
        if(friends[key].firstName === name){
            document.getElementById("firstName").innerHTML = (friends[key]);
            return(friends[key]);
        }
    }
}
search("Steve");
</script>
</html>

#2

Check what you are setting your .innerHTML equal to. Don't you meant to set it equal to friends[key].firstName?


#3

This just means the datatype you're trying to write inside the particular id is an object.
[object Object] is the default toString representation of an object in javascript. In your case this happened coz you didn't specify the key/ value of an object you are trying to access from the array.
If you're trying to assign values to the ID's you can just assign it accordingly from inside the function itself.

Try the following,

<!DOCTYPE html>
<html>
<head>
	<title>contact list</title>
	<link rel="stylesheet" href="contact-list.css">
</head>
<body>

<p id="firstName">First name</p>
<p id="lastName">Last name</p>
<p id="number">Phone number</p>
<p id="address">Some street</p>

</body>
<script type="text/javascript">
    
var friends = {
    bill:{
        firstName: "Bill",
        lastName: "Gates",
        number: "(61)101010",
        address: ["1 Oakley Road","Bondi","NSW"]
        },
    steve:{
        firstName: "Steve",
        lastName: "Jobs",
        number: "(61)101012",
        address: ["2 Oakley Road","Paddington","NSW"]
        }
    };
    
function list(friends){
    for(var key in friends){
        console.log(key);
    }
}

function search(name){
    
    for(var key in friends){
        if(friends[key].firstName == name){
            document.getElementById("firstName").innerHTML = friends[key].firstName;
            document.getElementById("lastName").innerHTML = friends[key].lastName;
            document.getElementById("number").innerHTML = friends[key].number;
            document.getElementById("address").innerHTML = friends[key].address;
        }
    }
}
search("Steve");

</script>
</html>

#4

I see. Thanks for this. It makes sense there's a much simpler way to do it than what I had.


#5

Of course. Thanks for picking that up. Much appreciated


#6

Since you have a simple structure you don't need id's at all. Just traverse the tree.

var p = document.getElementsByTagName('p');

It can be declared alongside the data and re-used by the function.

function search(name) {
    var k;
    for (var key in friends) {
        k = friends[key];
        if (k.firstName === name) {
            p[0].innerHTML = k.firstName;
            p[1].innerHTML = k.lastName;
            p[2].innerHTML = k.number;
            p[3].innerHTML = k.address;
        }
    }
}

#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.