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

JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

Luc Nghia
Luc Nghia
11,881 Points
Posted by Luc Nghia
Luc Nghia
11,881 Points

AJAX API Flicker. Help explain why we need to concatenate photo.link with like this href =" ' + photo.link + ' "

I don't understand stage displaying the photos in AJAX lesson. To give href attribute the url. I thought we just need add direct photo.link to href like this:

<a href="photo.link" >

But the lesson say we need to concate it like this: 

<a href= " ' + photo.link + ' ">

Why we need to concate here.

4 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Luc Nghia and K SA

You need to use concatenation to add whats inside the variable to the HTML string. This code:

photoHTML += '<a href="photo.link" class="image">';

literally makes the link to the image photo.link. There is no image named photo and no file extension named link. What you want is to get the string inside the the property link of the photo object. The value in that will be something like http://farm6.staticflickr.com/5606/15598599079_b9697400dc_m.jpg. By accessing the string in that variable and adding it to <a href=" and " class="image"> you will end up with something like this:

<a href="http://farm6.staticflickr.com/5606/15598599079_b9697400dc_m.jpg" class="image">

That will display in a web browser like a regular image -- exactly what you need to display the photos retrieved from Flickr.

alahab2
alahab2
9,709 Points
alahab2
alahab2
9,709 Points

Thanks a lot for you reply Dave McFarland!

So is that correct that

"<a href='" + photo.link + "' class='image'>"

basically means converting the value of photo.link into a string and putting that string into the href attr?

Means "+" signs on both sides gets the value out of photo.link and then putting it in quotes lets us using it as a string?

I just wanna make sure that i understand this step as it seems as a very often used method.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Yes, + is the operator in JavaScript that we use to combine strings. My new JavaScript Basics course covers this. You can watch this video which discusses string concatentation: http://teamtreehouse.com/library/javascript-basics-2/storing-and-tracking-information-with-variables/combining-strings

Luc Nghia
Luc Nghia
11,881 Points
Luc Nghia
Luc Nghia
11,881 Points

Many thanks K SA and Dave McFarland for raising this question again. This is the only problem that I am not clear through all teamtreehouse lessons so far.

as long as concatenation syntax. I think it should be"<a href=' + "photo.link" + ' class='image'>".

Sorry for my slow understanding.

Seth Reece
Seth Reece
32,867 Points
Seth Reece
Seth Reece
32,867 Points

Because we are adding the link gotten from the AJAX request to string that will be added to the html. In other words, if we we wrote href="photo.link", our actual html code written would be:

<a href="photo.link">...</a>
Seth Reece
Seth Reece
32,867 Points
Seth Reece
Seth Reece
32,867 Points

I'm still new to this, but this scenario would be similar to:

console.log("My name is name");
My name is name 

var name = "Seth";

console.log("My name is " + name + ".");
My name is Seth.

where the variable "name" is being used in the second console.log the same way photo.link is being used to write html to our page. Hopefully that helps a little. My comprehension is probably better than my ability to explain.

alahab2
alahab2
9,709 Points
alahab2
alahab2
9,709 Points

HI Seth Reece, i had the same question as Luc Nghia. Your example with the name is very clear, but you add some custom stuff in it to get the result you want.

In the lesson we add nothing like a variable or a string. All we do is adding "+" sign to the photo.link

photoHTML += "<a href="' + photo.link + '" class="image">;

This is all our code, maybe it will help

$(document).ready(function() {
  $('button').click(function() {
    $('button').removeClass("selected");
    $(this).addClass('selected');

    var flickerAPI = 'https://api.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);
  });
});

Or maybe Dave McFarland could help us to understand why we need concatenation there.

Thank you all in advance!

Luc Nghia
Luc Nghia
11,881 Points
Luc Nghia
Luc Nghia
11,881 Points

Thanks Seth, Can you explain more how the concatenation work ```<a href="' +photo.link+ '">'''