8/8 How do I accomplish the formatting of the output shown with cleaner code?


#1

Here's my code:

var friends = {
    bill: {
            firstName: "Bill",
            lastName: "Stav",
            number: "(209) 555-5555",
            address: ["223 W. Coco Drive", "Los Angeles", "CA", "90210"]
        },
    steve: {
            firstName: "Steve",
            lastName: "Stash",
            number: "(209) 555-5444",
            address: ["224 E. Agua Avenue", "Los Angeles", "CA", "90210"]
        }
};

var search = function(name) {
    for(var key in friends) {
        if(friends[key].firstName === name) {
            console.log("First Name: " + friends[key].firstName);  
            console.log("Last Name: " + friends[key].lastName);  
            console.log("Number: " + friends[key].number);  
            console.log("Address: " + 
                            friends[key].address[0]  + "\n" + " " + " " + 
                            " " + " " + " " + " " + " " + " " + " " +
                            friends[key].address[1] + "," + " " +
                            friends[key].address[2] + " " + 
                            friends[key].address[3]
                        );  
        }    
    }
}

search("Steve");

Result:

First Name: Steve
Last Name: Stash
Number: (209) 555-5444
Address: 224 E. Agua Avenue
         Los Angeles, CA 90210

I accomplish the way the output is supposed to look, but I don't think that was how it's suppose to be coded...
You see my code is a mess, I was hoping if there was a way to use the for loop to go through all the elements in the array such as the one above which is the associated value of the property-key address. Also, my excessive use of quotation marks to add spaces I disliked.. so is there a way to add indentation in javascript so that:
Los Angeles, CA 90210
is perfectly aligned with:
224 E. Agua Avenue
without using so many quotation marks.. (" " + " " + " " + " ")
The output should look like the following:

Address: 224 E. Agua Avenue
         Los Angeles, CA 90210

Am I confusing..? Eh.. am I not making any sense? :joy:


#2

Well you're adding a lot of extra unnecessary work for yourself. Do what you recently learned with the for-in loops (example below). It doesn't need to look amazing, but technically the route you are taking could be established by simply adding all of the empty spaces into one set of quotation marks:

console.log("                     ");

For-In example:

for ( var variable in object ) {
    //Code Here.
}

This is a complex procedure so I added my code below to learn from (It's best to attempt to understand it, please don't just copy paste into your code).

var search = function(name)
{
	for (var prop in friends)
	{
		if (friends[prop].firstName === name)
		{
			console.log(friends[prop]);
			return friends[prop];
		}
	}
};

I can go into depth on this topic if you wish, however I don't have the time at present. I will reply to this when I can with a more in depth explanation of the code example above when I have the chance.


#3

Your code:

var search = function(name) {
        for (var prop in friends) {
        		if (friends[prop].firstName === name) {
        			console.log(friends[prop]);
        			return friends[prop];
        		}
        	}
        };

Thank you. I have an understanding of how a for-in loop works, but what confused me is your use of console.log() within your if statement. You see if you're already returning friends[prop], then what's the point of using console.log(friends[prop]). If you call your search function with the input of "Steve" the output looks like this:

{ firstName: 'Steve',
  lastName: 'Stav',
  number: '(209) 555-5555',
  address: [ '223 W. Coco Drive', 'Jaqua', 'CA', '90210' ] }
{ firstName: 'Steve',
  lastName: 'Stav',
  number: '(209) 555-5555',
  address: [ '223 W. Coco Drive', 'Jaqua', 'CA', '90210' ] }
{ firstName: 'Steve',
  lastName: 'Stav',
  number: '(209) 555-5555',
  address: [ '223 W. Coco Drive', 'Jaqua', 'CA', '90210' ] }
{ firstName: 'Bill',
  lastName: 'Stav',
  number: '(209) 555-5555',
  address: [ '223 W. Coco Drive', 'Jaqua', 'CA', '90210' ] }
{"firstName":"Steve","lastName":"Stav","number":"(209) 555-5555","address":["223 W. Coco Drive","Jaqua","CA","90210"]}

It's messy.. :cry:
it's either that or something is wrong with mine.. :confused:

Removing console.log() in your if statement, and
I've done some changes.. I console.log(search("Steve")).
The output looks like the following, so which one is correct..?

{ firstName: 'Steve',
  lastName: 'Stav',
  number: '(209) 555-5555',
  address: [ '223 W. Coco Drive', 'Jaqua', 'CA', '90210' ] }