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
Uros Tadic
5,167 PointsI don't understand concatenation. "' + photo.media.m + '"
Why do we have to add another pair of ' and on top of that a space with +. Why couldn't this we written just
'<img src="photo.media.m"> </a> </li>'
why is it
'<img src="' + photo.media.m + '"> </a> </li>'
6 Answers
Jennifer Nordell
Treehouse TeacherAt 5:38 in the video he explains this. The photo.media.m points to to a URL with a picture that is a jpg file. It's a variable. So we're going to get the result of that variable name (which points to an image) and insert it there. Otherwise your code will be looking for a picture with the file name "photo.media.m" which doesn't exist.
edited for additional note
Because we have to concatenate and we want the quotation marks to be part of our string (instead of beginning and ending our string) we have to use different quote marks to make this understood to JavaScript.
Hope this helps!
Leigh Maher
21,830 PointsWith the newest version of JavaScript you can now use template stings which makes this so much easier to read and write. Here's how that code would look:
statusHTML += `<a href="${picture.link}" class="image">`;
statusHTML += `<img src="${picture.media.m}" class="thumbnail">`;
It's explained quite well here: https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
ruhullalam
14,500 PointsI've started trying to use this method. I find it simpler to process. var yourNameVariable = "John"
var example = Hello ${yourNameVariable} // Hello John
SCU ACM
32,149 PointsHi Jennifer, I am also having hard time thinking about this. Is there another way to think about it?
Jeremy Castanza
12,081 PointsSCU ACM -
'<img src="photo.media.m"></a></li>'
The example above would basically just spit out the HTML to the page, once the .html() jQuery method is called on the photoHTML variable in the video.
In this instance, the HTML is literally looking on your computer or the server for an image file called "photo.media.m" rather than one that might be called something like "mycat.jpg"
'<img src="' + photo.media.m + '"></a></li>'
When written with the single quotes and concatenation (the plus signs) in the second example, we're basically telling Javascript to literally write out what's in single quotes to the page, jump out of the quotes and get the correct file link that's been stored in the "photo.media.m" variable from the Flickr API, then jump back in and literally write the rest of the stuff in single quotes in order to close the HTML tags. The main reason that it's photo.media.m is basically dictated by how Flickr structured their JSON data.
Photo is basically a single item/object in the "items" array in the JSON file. Media is an object inside the photo's object and it has a property of m. M is the link where the Flickr photo is located and what we need inside the src attribute in order to correctly load the images dynamically to the page.
See the following link for reference to the data: http://api.flickr.com/services/feeds/photos_public.gne?format=json
Hope this helps!
SCU ACM
32,149 PointsHi Jeremy, You helped me clear up my confusion. Thank you very much!
Jeremy Castanza
12,081 PointsNo problem. Glad I could help!
nagamani palamuthi
6,160 PointsHi Jeremy, your explanation was quite clear. Just not clear about the role of "" double quotes. I understand that the single quotes literally prints the html when called... '<img src="' + photo.media.m + '"></a></li>' is the double quotes the ones that go around the src attribute?
Jeremy Castanza
12,081 PointsNagamani, That's correct. The double quotes are meant for when the HTML is rendered. It has little to do with JavaScript and more to do with the HTML attributes that will be loaded in the DOM. In this situation, it applies to the source attribute, but could also apply to other HTML attributes as well (e.g. target, style, etc.).
nagamani palamuthi
6,160 Pointsgot it Thanks!