Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
S Ananda
9,474 PointsDon't understand the concatenation in this video.
In this video Dave says that we need to concatenate two lines of code. I don't understand why we need to and how I would know in the future that I need to concatenate a line. I also don't understand the actual concatenation. It looks like there is just a space before and after the info we're calling. Why do we need to do this? Below is the code for the completed assignment. The two lines are in the function "displayPhotos."
$(document).ready(function () {
$('button').click(function () {
$("button").removeClass("selected");
$(this).addClass("selected");
var flickerAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var animal = $(this).text();
var flickrOptions = {
tags: animal,
format: "json"
};
function displayPhotos(data) {
var photoHTML = '<ul>';
$.each( data.items, function (i, photo) {
photoHTML += '<li class="grid-25 tablet-grid-50">';
photoHTML += '<a href="' + photo.link + '" class="image">';
photoHTML += '<img src="' + photo.media.m + '"></a></li>';
});
photoHTML += '</ul>';
$('#photos').html(photoHTML);
}
$.getJSON(flickerAPI, flickrOptions, displayPhotos);
});
});
3 Answers
katinkahesselink
2,392 PointsI came here with just this question. I think I've figured it out though. Look at this line:
photoHTML += '<a href="' + photo.link + '" class="image">';
What gets added to the photoHTML variable here is first the string: '<a href="' Then the content of the photo.link variable in the api. Since this is outside the string added, the space is merely formatting for us programmers to read. It does not get added to the photoHTML string.
That is really it, as far as my explanation goes. But to complete it, the string '" class="image">' of course gets added last.
Ellis Briggs
11,108 PointsI think it is because with Javascript if the 'photo.link' was in the string, it would be counted as such, so no variable value just the printed text this way it changes but outside of the speech marks the 'White space' does not affect what the result will look like it will be added to the end, so adding the space just before you use concatenation (within the speech marks) it will result in a space where the Href attribute is supposed to go.
Simply if it is not in the marks white space does not matter as Javascript is a weakly typed language. Scorn me if I'm wrong :P
Matthew Caloger
12,903 PointsString concatenation is used when you need to append information into a string line, for example:
var counter = 9;
console.log("I have counted " + counter + " times."); // => I have counted 9 times
We took the numeric value 9 and inserted it into a string.
This lesson can get confusing and messy because you're using string concatenation to create HTML that will be inserted into the page, and HTML uses doublequotes, while string concatenation can use single or double quotes. The '+' symbol is what bridges everything into a string.
S Ananda
9,474 PointsThanks Matthew for your explanation, but I already understand what concatenation does, but I don't understand this particular use of it, as you have a blank space before and after photo.link in the one img src and did the same thing in the next one. Why blank spaces? What does that do? and how would I have known that I even needed concatenation for this particular result? Sometimes they tell us to do something that we've never seen before without any explanation as to why they are doing it, which doesn't help me to understand when to use this type of code in the future. I just don't get the logic on this one.
S Ananda
9,474 PointsS Ananda
9,474 PointsThanks, now that I've done more coding and have a better understanding, your explanation makes sense.